html - 我可以将 li padding 设置为 auto 以使其适合 ul 宽度吗？

Question

这是我的 CSS

#aznav
{
    padding:0;
    width:980px;
}

#aznav li
{
    display:block;
}

#aznav li a
{
    font-family:Arial;
    font-size:12px;
    text-decoration: none;
    float:left;
    padding:8px;
    background-color: #333333;
    color:#ffffff;
    border-bottom:1px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
}

#aznav li a:hover
{
    background-color:#9B1C26;
    padding-bottom:8px;
    border-bottom:2px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    margin:-1px;
}

这是 html:

<ul id="aznav">
    <li><a href="#">Artist Names:</a></li>
    <li><a href="#">#</a></li>
    <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>
    <li><a href="#">I</a></li>
    <li><a href="#">J</a></li>
    <li><a href="#">K</a></li>
    <li><a href="#">L</a></li>
    <li><a href="#">M</a></li>
    <li><a href="#">N</a></li>
    <li><a href="#">O</a></li>
    <li><a href="#">P</a></li>
    <li><a href="#">Q</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">S</a></li>
    <li><a href="#">T</a></li>
    <li><a href="#">U</a></li>
    <li><a href="#">V</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>
</ul>

上面的列表有 8px 的内边距。但我希望它是“自动”的，以便它适合 980 像素的 ul 宽度。

严格的宽度是 980px。我不能超越那个，当我玩填充时，它似乎忽略了我设置的宽度。

有什么想法吗？

完成

感谢 TJ，我得到了我需要的东西。他给我的例子几乎是完美的，但我丢失了一些格式，就像我在上面的例子中那样。为了纠正这个问题，我在 li 上使用了 first-of-type。我使用的最终 CSS 代码如下。如果有人感兴趣的话，它是一个有吸引力且简单的水平菜单。

#aznav
{
padding:0;
display:flex;
justify-content:space-around;
background-color: #333333;
}
#aznav li:first-of-type
{
width:50px;
}
#aznav li
{
display:inline;
width:3.3%;
}
#aznav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:8px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
#aznav li a:hover
{
background-color:#9B1C26;
padding-bottom:8px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

Answer 1

如果古老的浏览器支持不是问题，您可以使用 css3 Flex属性(property)，通过申请

display:flex;
justify-content:space-around;

对于<ul>

检查这个JSFiddle

justify-content @ MDN