在内联列表中使用填充或边距

时间:2012-02-16 16:10:01

标签: html css

我有很多问题。如果我希望内联列表为某个高度/宽度,最好使用display:inline;并将高度和宽度设置为<ul>元素?或者我应该使用float:left;并将overflow:hidden;应用于<ul>元素吗?另外,在列表中应用<li>元素或<a>的边距/填充是否更好?如果你重置值,你甚至需要吗?每个人都会占用尽可能多的空间,或者最后一个孩子是否会更长时间以容纳多余的空间?

5 个答案:

答案 0 :(得分:6)

你的问题非常理论化。

您可能需要解释更多您正在尝试做的事情,因为您所谈论的内容有其优点和缺点。

例如,将忽略纯“内联”元素的高度或宽度。您需要使用块级元素来执行此操作,其中包括浮动块或“内联块”。

http://jsfiddle.net/3YU3y/3/

如果你漂浮,它的位置可能与你预期的不同。

如果你想要一个水平列表与一个“内联列表”,那么就有很多设计模式。查看Dan Cederholms网站,了解一些真正常见的HTML / CSS模式:

http://pea.rs

特别查看“列表”和“导航”。

希望有所帮助!

干杯!

答案 1 :(得分:2)

我更喜欢显示内联,因为我似乎更有意义地使用它而不是浮动某些我怀疑从未想要浮动的东西。

浮动内容对于布局和内联列表非常方便,但我猜不是它的原始意图。

答案 2 :(得分:2)

我会将所有样式应用于内部元素(A),而不是列表。我只对float:position:display:的列表设置样式;是否使用inlinefloat取决于您。只需确保在display:block - 代码上使用A

请参阅我的教程:http://preview.moveable.com/JM/ilovelists/

答案 3 :(得分:0)

这是我放在一起玩的good example。它打破了你正在寻找的每个概念。

答案 4 :(得分:0)

使用display:inline。如果你想要一个固定的宽度,通过CSS设置你的li的宽度。使用行高为固定高度。