为什么在我的简单情况下填充左侧不起作用？

我有一个非常简单的布局，只有两个使用<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不起作用，为什么？

来源

2011-10-18 Leem.fin

请确保您的问题可以理解，而无需将用户转到其他网站。很少有网站可以拥有完美的100％正常运行时间（至少在所有jsFiddle中）。 –

你想让'＃fist-list'和'＃second-list'漂浮在左边吗？ –

你为什么不使用保证金，将它们分开？ –

如果你还是想漂浮在李

可以浮动左边的列表中，那么它会工作。

这样的：

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

不过我想使它成为另一种方式，但我需要看到你想要达到的目标。你有这个照片吗？

来源

2011-10-18 09:50:39

我想要实现的是有两组水平制表符（这就是为什么我需要浮动肯定），这是从ui li，然后我想分开两组所以，我的exmaple代码已经表明我想要的东西 –

如果你可以解释你的代码背后的逻辑，这也是很好的。谢谢。 –

这是一个快速的答案，但不是一个很好的解决方案 – sandeep

这里有几个问题：

您使用的浮动，这破坏了布局

的div是块级元素，因而总是会破线。

只需删除浮动，使div的直列块，像这样：

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

好运！

来源

2011-10-18 09:42:43

但由于某种原因，我需要漂浮物。如何解决这个问题，而不需要移除浮子。 –

inline-blocks在旧版浏览器中不起作用 – 472084

自IE6以来，inline-block在几乎所有浏览器中都可以工作，而IE6在全球范围内的使用份额为2％。该放手了。 –

写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 parenthttp://jsfiddle.net/sandeep/a8dy6/22/

左右;你必须clear它的parent当child有float。

检查完毕后clear parenthttp://jsfiddle.net/sandeep/a8dy6/23/

来源

2011-10-18 09:44:21 sandeep

检查我的更新＆所有链接也。如果你有任何问题，然后问我:) – sandeep

为什么在我的简单情况下填充左侧不起作用？

回答

相关问题