css - 无法为 标签设置宽度

Question

我试图在这个 ul 中为标签提供 20% 的宽度，但我做不到。任何帮助将不胜感激。我可以设置 li 元素的宽度，但我希望将宽度设置为 <a> .

<nav>
<ul class="navigation">
<li class="main_nav_li"><a href="index.html">Home</a></li>
<li class="main_nav_li"><a href="#">About</a></li>
<li class="main_nav_li"><a href="#">Services</a></li>
<li class="main_nav_li"><a href="#">Stylist</a></li>
<li class="main_nav_li"><a href="#">Contact</a></li>
</ul>
</nav>


<style>
nav{
    width:98%;
    border: 1px solid black;
    overflow:hidden;
    height:3em;

}

.nav{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow: hidden;

}

li{
    list-style-type: none;
    float: left;
    padding-top: 1em;
}

a{ 
    width: 20%;
    text-align: center;
    line-height: 10%;
    font-size: 1em ;
    text-decoration:none;
    padding-top: 0.5em;
        font-family: 'Happy Monkey', cursive;
}

</style>

Answer 1

您不能为行内元素设置宽度。

添加 display: inline-block; 就可以了

a{ 
    width: 20%;
    text-align: center;
    line-height: 10%;
    font-size: 1em ;
    text-decoration:none;
    padding-top: 0.5em;
    font-family: 'Happy Monkey', cursive;
    display: inline-block;
}