html子列表自动添加填充

时间:2016-11-21 08:53:05

标签: html css html5 css3 padding

我有一个列表,其中有一个子列表,我用两个DIV填充,左边都是FLOAT(编辑)。

结构就像 -

<ol> <li>
    <ol>
    <li>
        <div>first div</div>
        <div>second div</div>
    </li>
    <li></li>
    <li></li>
    <li></li>
</ol>
</li>
</ol>

现在,第一个浮动的左边是一张图像,它正常,但另一个左侧(文字向右移动)自动在顶部添加了一个7px的自动填充必须在第一个图像div上做一个填充顶部。

如何删除第二个div中的自动填充?

示例here

我在此图片中以红色标出了问题 - enter image description here

4 个答案:

答案 0 :(得分:2)

您可以使用否定margins,这样您就可以在任何方向上移动元素。在您的情况下,您可以向第二个div添加否定margin-top

.com_text {
    margin-top: -5px;
}

答案 1 :(得分:0)

您可以使用以下命令为第二个div编写css:

li:nth-child(2) {
    padding-top: 0;
}

答案 2 :(得分:0)

也许纠正CSS会得到结果:

.comm_img{
    padding-top:5px;
}

.comm_text{
    margin-top:0px;
}

答案 3 :(得分:0)

使用填充和边距来解决问题

&#13;
&#13;
ol li div:nth-child(2){
  padding:3px;
  margin:3px;
  }
&#13;
&#13;
&#13;