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;
}

Answer 2

默认情况下，它们是内联元素。你必须使用：

display: inline-block;

块级元素允许您设置宽度，内联元素则不允许。

Answer 3

这是一个有效的例子：

http://jsfiddle.net/rKwkH/1/

我必须将width和display:inline-block应用于li：

li{
    list-style-type: none;
    float: left;
    width: 20%;
    display: inline-block;
}

无法将宽度设置为<a> tags</a>

3 个答案: