3

リストといくつかの問題があります。一元化できません< li >。常に整列しています。それらの例を次に示します。

ここに画像の説明を入力

今、私が彼らにさせようとしているように：

ここに画像の説明を入力

誰でもこの問題を解決するのを手伝ってくれませんか? ここで私が使用しているコード。

HTML

<div class="header_middle_menu">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
    </ul>   
</div>

CSS

.header_middle_menu{
    float: left;
    margin-left: 50px;
    margin-top: 15px;
    width: 490px;
}

.header_middle_menu li{
    float: left;
}

.header_middle_menu ul{
    list-style: none;
}

.header_middle_menu ul li{
    background: #FB5904;
    display: inline;
    margin: 5px;
    padding: 7px;
}

.header_middle_menu ul li a{
    color: #FFFFFF;
    font-family: arial;
    font-size: 13px;
    text-decoration: none;
}

.header_middle_menu li:hover ul{
    display: block;
}
4

1 に答える 1

7

次の 3 つのことを行うことができます。

  • text-align:center;に追加.header_middle_menu
  • float: left;から削除.header_middle_menu li
  • に変更display: inline;_display: inline-block;.header_middle_menu ul li

jsFiddle の例

于 2013-08-16T17:00:18.077 に答える