html子列表自动添加填充

Question

我有一个列表，其中有一个子列表，我用两个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

我在此图片中以红色标出了问题 -

Answer 1

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

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

Answer 2

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

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

Answer 3

也许纠正CSS会得到结果：

.comm_img{
    padding-top:5px;
}

.comm_text{
    margin-top:0px;
}

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;