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

Question

我有一个无序列表，其中列表项已设置为 display:inline。我喜欢它的外观，但是当项目换行到下一行时，项目之间的垂直空间重叠。

我尝试在 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

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

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

Answer 2

尝试这个

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

演示。

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请改用，这不会花费您任何费用。