-1

我目前正在与响应式两列布局作斗争。问题是我可以调整 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>

我需要它看起来像什么：

图片

它目前的样子：

在此处输入图像描述

4

3 回答 3

2

没有什么像top-margin:0。试试这个代码。

.list_2Column ul {
  padding-top: 0px;
  margin-top: 0;
  margin-bottom: 0;
}
于 2018-06-08T15:45:24.137 回答
0 
.list_2Column ul {
    margin-bottom: 3px;
    margin-top: 3px;
}

如果您绝对不需要填充，可以将其更改为 0px

于 2018-06-08T15:42:09.930 回答
0

添加 margin-top: 0;和margin-bottom: 0;到：

.list_2Column ul {
  top-padding: 0px;
}
于 2018-06-08T15:51:09.760 回答