Question

我有一个非常简单的布局，使用<ul><li>只有两个无序列表，每个列表都在<div>内。

<div id="main">
    <div id="fist-list">
        <ul id="colors">
            <li id="white">White</li>
            <li id="green">Green</li>
        </ul>
    </div>
    <div id="second-list">
        <ul id="numbers">
            <li id="one">One</li>
            <li id="two">Two</li>
        </ul>
    </div>
</div>

li{
  float: left;
  width: 30px;
}
#second-list{
  padding-left:30px;
}

you can check my simple code here。

我尝试使用CSS padding-left 单独两个列表相距30px，但我的CSS不起作用，为什么？

Answer 1

这里有几个问题：

你正在使用Float，它会破坏布局

Div是块级元素，因此总是会破坏该行。

只需删除浮点数，并使div成为内联块，如下所示：

http://jsfiddle.net/a8dy6/12/

祝你好运！

Answer 2

如果你仍然希望浮动在li

你可以向左浮动列表，然后它就可以了。

像这样：

#second-list{
  padding-left:30px;
  float:left
}

我仍然会采取另一种方式，但我需要看看你想要实现的目标。你有照片吗？

Answer 3

将overflow:hidden写在div至clear，因为child's float

div{overflow:hidden}
#second-list, #fist-list{float:left}

检查此http://jsfiddle.net/sandeep/a8dy6/18/

编辑：根据你的评论

 li{clear:left;}

检查此http://jsfiddle.net/sandeep/a8dy6/19/

修改

原因：实际上#second-list采用了padding

如果您定义一个float元素，那么您必须clear parent否则parent崩溃。

如果没有clear the parent http://jsfiddle.net/sandeep/a8dy6/22/
，请检查此项
因此;当parent有child时，您必须clear float。

在clear parent http://jsfiddle.net/sandeep/a8dy6/23/
之后检查一下

为什么padding-left在我的简单案例中不起作用？

3 个答案: