FINISHED

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。但我希望它是'auto'，因此它适合ul宽度为980px。

严格宽度为980px。我不能超越这个，当我使用填充时，似乎忽略了我的设置宽度。

有什么想法吗？

FINISHED

感谢TJ，我得到了我所需要的。他给我的例子几乎是完美的，但我已经失去了一些格式，就像我在上面的例子中所做的那样。为了纠正这个问题，我在li上使用了第一个类型。我正在使用的最终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属性，通过应用

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

代表<ul>

检查此JSFiddle

justify-content @ MDN

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

FINISHED

1 个答案: