无法在固定大小的div内适合所有灵活文本长度的选项卡

Question

我有一个网站的标题菜单。让它带有9个标签，其中两个应该是宽的，而其他的是短文本。我想让所有标签在div中调整它们的宽度，看起来更均匀。你能帮我解决这个问题吗？谢谢。

  

HTML

<div id="header_menu" align="center">
<ul >
<li><a href="#">Items </a>
</li>
<li><a href="#">Inventory Inspection</a>
</li>
<li><a href="#">Orders</a>
</li>  
..
..

  

CSS

#header_menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#header_menu ul li {
    position: relative;
    float: left;
    display: inline-block;
}
#header_menu ul li a {
    color: #CCC;
    background-color: #333;
    text-align: left;
    display: inline-block;
    text-decoration: none;
    height: 20px;
    border-right-width: thin;
    border-bottom-width: thin;
    border-right-style: inset;
    border-bottom-style: inset;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    float: left;
    width: 115px;
}
#header_menu {
    width: 80%;
}

Answer 1

如果您想在列表元素上使用display: inline-block，可以考虑使用min-width和百分比值，而不是将其修复为115px。

或者您可以将每个列表项设置为display: table-cell。