导航栏列表项目根据列表字符串长度更改大小

时间:2014-12-05 22:44:24

标签: html css

我创建了一个导航栏,据说其中包含沿导航栏均匀分布的列表项,但似乎具有较长字符串长度的列表项比其他项更宽。有办法解决这个问题吗?

<div id="menu-bar">
    <ul>
        <li><a href=#>Home</a></li>
        <li><a href="ferrari.html">Ferrari</a></li>
        <li><a href="lamborghini.html">Lamborghini</a></li>
        <li><a href="bugatti.html">Bugatti</a></li>
    </ul>
</div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

#menu-bar {
background-color: #51F069;
width: 100%;
height: 40px;
border-top: 2px solid #8f8f8f;
border-bottom: 2px solid #8f8f8f;
display: table;
}

#menu-bar li {
list-style-type: none;
display: inline-block;
font-family: Ferrari;
display: table-cell;
text-align: center;
}

#menu-bar a {
display: block;
font-size: 25px;
line-height: 40px;
}

#menu-bar ul {
width: 100%;
display: table;
}

1 个答案:

答案 0 :(得分:1)

这是默认行为,它们已设置为display:table-cell。如果查看HTML表格,具有较长内容的单元格将占用表格中的更多空间。

只需将width设置为列表项:

#menu-bar li {
    list-style-type: none;       
    font-family: Ferrari;
    display: table-cell;
    text-align: center;
    width: 25%; /* 100% / 4 li's */

}

这是一个小提琴:http://jsfiddle.net/sa7x258k/1/