如何将垂直空间添加到水平列表中？

我有一个无序列表，列表项已被设置为显示：内联。我喜欢它的外观，但是当项目换行到下一行时，项目之间的垂直空间重叠。如何将垂直空间添加到水平列表中？

我试着在li项目，ul项目和这些项目所包含的div设置边距.Li项目不会扩展，他们不会使用我通过div提供的额外空间。

这里是什么它目前看起来像一个截图： A set of menu items that are vertically too close to each other

HTML：

<div class="hometrailertypes"> 
<ul> 
    <li><a href="/utility/Box_Series">Box Series</a></li> 
    <li><a href="/utility/Landscaper_Series">Landscaper Series</a></li> 
    <li><a href="/utility/ATV/Utility_Series">ATV/Utility Series</a></li> 
    <li><a href="/utility/Snowmobile_Hauler_Series">Snowmobile Hauler Series</a></li> 
    <li><a href="/utility/Car_Hauler_Series">Car Hauler Series</a></li> 
    <li><a href="/utility/Tandem_Flatbed_Series">Tandem Flatbed Series</a></li> 
    <li><a href="/utility/Deckover_Series">Deckover Series</a></li> 
    <li><a href="/utility/All_Purpose/Equipment_Floats">All Purpose/Equipment Floats</a></li> 
    <li><a href="/utility/Dumps">Dumps</a></li> 
    <li><a href="/utility/Mini_Series">Mini Series</a></li> 
    <li><a href="/utility/Scissor_Lift_Series">Scissor Lift Series</a></li> 
    <li><a href="/utility/Telescopic_Lift_Series">Telescopic Lift Series</a></li> 
    <li><a href="/utility/Combo_Series">Combo Series</a></li> 
</ul> 
</div>

CSS：

.hometrailertypes>ul 
{ 
    list-style-type: none; 
    text-align: center; 
} 
.hometrailertypes>ul>li 
{ 
    display: inline; 
} 
.hometrailertypes>ul>li>a 
{ 
    padding: .2em .1em; 
    background-color: #036; 
    color: #fff; 
    text-decoration: none; 
} 
.hometrailertypes>ul>li>a:hover 
{ 
    background-color: #369; 
    color: #fff; 
}

来源

2012-08-12 Jason McCarrell

HTML/CSS会很好...... – sachleen 2012-08-12 00:19:50

对不起。我编辑它= P – 2012-08-12 00:22:46

所有答案都是可靠的。谢谢。我尝试了内联块，但我一定没有尝试实际上在同一时间添加边距......我很傻。 – 2012-08-12 15:22:29

试试这个

.hometrailertypes>ul>li 
{ 
    display: inline-block; 
    margin:2px 0px; 
} 
.hometrailertypes>ul>li>a 
{ 
    padding: .2em .1em; 
    background-color: #036; 
    color: #fff; 
    text-decoration: none; 
    display: inline-block; 
}

DEMO。

来源

2012-08-12 00:26:14

你应该尝试display:inline-block，而不是inline。

这样，项目不会换行到下一行，您不会遇到任何问题。那么，第一行中会有一些项目，第二行中会有一些项目......但是没有一个会中断，因为它们的行为与前后没有换行符的块一样。

来源

2012-08-12 00:24:08 Oriol

我会是这样的：

.hometrailertypes>ul>li 
{ 
    display:inline; 
    line-height:24px; /*set your desired height that way*/ 
}

况且什么其他的答案说，我建议保持显示inline因为inline-block在一些“老”的浏览器不能正常工作，参见http://caniuse.com/inline-block因此，如果您有相同的选项，请使用line-height来代替，这不需要花费任何费用。

来源

2012-08-12 00:36:33 darma

我欣赏传统的答案。干杯! – 2012-08-12 15:22:53

如何将垂直空间添加到水平列表中？

回答

相关问题