html - 从 div 中删除所有填充
问题描述
我目前正在与响应式两列布局作斗争。问题是我可以调整 div 左侧和右侧的填充,但不能调整顶部和底部。我尝试为 html 中的每个元素手动设置 padding-top,但没有任何效果。
在这一点上,我已经与它战斗了一个小时,所以我现在正在寻求帮助。代码如下,我还附上了我需要的视觉示例。(忽略纯文本的丑陋,在我修复它之前,我不会将它放在网站本身上。)
这是CSS。
.TwoColumnRow * {
box-sizing: border-box;
}
.list_2Column {
float: left;
width: 50%;
padding-right: 10px;
}
.list_2Column ul {
top-padding: 0px;
}
.TwoColumnRow :after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
@media screen and (max-width: 450px) {
.list_2Column {
width: 100%;
}
}
这是 HTML。
<h2>What is the Employee Wellness Program?</h2>
<p>Our Employee Wellness Program assists businesses, non-profits, and their employees to navigate workplace and personal challenges through educational and supportive counseling. Our program has a strong mental health component which can stand alone or be used with a company’s existing wellness initiative. Research shows employee wellness services can benefit organizations by:</p>
<div class="TwoColumnRow">
<div class="list_2Column" style="background-color:#ededed">
<ul>
<li>Increasing productivity
<li>Decreasing absenteeism and lost revenue
<li>Improving morale and loyalty
</ul>
</div>
<div class="list_2Column" style="background-color:#cccccc">
<ul>
<li>Teaching new skills
<li>Providing resources and referrals
</ul>
</div>
</div>
我需要它看起来像什么:
它目前的样子:
解决方案
没有什么像top-margin:0
。试试这个代码。
.list_2Column ul {
padding-top: 0px;
margin-top: 0;
margin-bottom: 0;
}
推荐阅读
- javascript - 渲染时如何向对象添加过渡?
- javascript - 使用 redux 工具包时出现错误“在状态中检测到不可序列化的值” - 但不是正常的 redux
- css - 在不修改 HTML 的情况下将两个 div 对齐在同一行
- python - Django - 更新用户的个人资料会删除会话
- python - 是否可以在 python 中更改数字系统?
- mysql - 从 json 数组 mysql 中获取数据到单元格中
- haskell - 创建数据时括号不匹配的解析错误
- python - 是否需要将 pandas 数据帧转换为 numpy 数组以显示其中存储的图像和坐标?
- elixir - 错误的返回值模式
- firebase - 运行 Firestore 本地模拟器时如何查看数据库数据?