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

Question

我有一个无序列表，其中列表项已设置为显示：内联。 我喜欢它的样子，但当物品包裹到下一行时，垂直空间在物品之间重叠。

我尝试在li项目，ul项目以及包含这些项目的div上设置边距.li项目不会扩展，它们不会使用我通过div提供的额外空间。

以下是目前的截图：

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;
}

Answer 1

试试这个

.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

Answer 2

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

这样，项目不会换行到下一行，也不会有问题。好吧，第一行会有一些项目，第二行会有一些......但是没有一个会破坏，因为它们的行为就像没有换行前后的块一样。

Answer 3

我会这样：

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

除了其他答案之外，我建议保持显示inline，因为inline-block在某些“旧”浏览器中不起作用，参见http://caniuse.com/inline-block因此，如果您有相同的选项，请改用line-height，这样就不需要任何费用。