html - 如何使用 css 集中列表？

Question

我有一个列表和一些问题。我无法集中 < 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;
}

Answer 1

你可以做这三件事:

• 将 text-align:center; 添加到 .header_middle_menu
• 从 .header_middle_menu li 中移除 float: left;
• 将 display: inline; 更改为 display: inline-block; in .header_middle_menu ul li

jsFiddle example