html - 为什么 padding-left 在我的简单情况下不起作用？

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

如果你还想在 li 处 float

您可以将列表向左浮动，然后它将起作用。

像这样:

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

我仍然会采用另一种方式，但我需要了解您想要实现的目标。你有它的照片吗？