0

リストアイテムが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;
}
4

3 に答える 3

3

display:inline-blockの代わりに試してくださいinline。

このように、アイテムは次の行に折り返されることはなく、問題は発生しません。さて、最初の行にいくつかの項目があり、2番目の行にいくつかの項目があります...しかし、前後に改行のないブロックのように動作するため、それらのいずれも壊れません。

于 2012-08-12T00:24:08.087 に答える
3

これを試して

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

デモ。

于 2012-08-12T00:26:14.500 に答える
2

私はこのように行きます：

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

他の回答のほかに、一部の「古い」ブラウザでは機能しないため、inline表示を維持することをお勧めします。http://caniuse.com/inline-blockしたがって、同等のオプションがある場合は、代わりに使用してください。費用はかかりません。inline-blockline-height

于 2012-08-12T00:36:33.863 に答える