Question

我有5个菜单项，我难以根据背景进行定位。

菜单文本似乎在中间聚集在一起，而不是听“宽度”属性将它们放在正确的位置。

的jsfiddle： http://jsfiddle.net/nmHSD/

HTML：

<div id="menu">
    <div class="table">
        <ul>
            <li><a href="home.html">Home</a>
            </li>
            <li>What we do</li>
            <li>Our clients</li>
            <li>Testimonials</li>
            <li>Contact us</li>
        </ul>
    </div>
</div>

CSS：

#menu {
    top:13px;
    left:0px;
    position:relative;
    height:60px;
    width:523px;
    background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
.table {
    display: table;
    /* Allow the centering to work */
    margin: 0 auto;
}
#menu ul {
    width: 696px;
    list-style: none;
    padding-top: 20px;
}
#menu ul li {
    display: inline;
}

Answer 1

你的意思是更像这样？我在你的CSS中改变了一些事情。

我在float:left;上使用了<li>而不是inline，因为您有5 list-items我给了他们width:20%;。

你的新css： （减去css，但结果就是你想要的。）

#menu {
    top:13px;
    left:0px;
    height:60px;
    width:523px;
    background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}

#menu ul {
    width:523px;
    list-style: none;
    padding-top: 30px;
    padding-left:0;
}
#menu ul li {
    float:left;
    width: 20%;
    text-align:center;
}

<强> DEMO

Answer 2

您需要在display: inline-block;元素上使用<li>才能使用宽度，如下所示：

#menu ul li {
    display: inline-block;
    width: 150px;
}

Answer 3

我认为以下代码可以为您提供帮助：

替换代码：

#menu ul {
list-style: none;
float: left;
padding: 20px 0 0 0;
}

以及

 #menu ul li {
    float: left;
    width: 104px;
    text-align: center;
    }

菜单的无序列表没有间距

3 个答案: