有人可以告诉我为什么当我明确将其设置为60px时,我的标签宽度设置为自动?
这是我的HTML(使用嵌入式CSS):
<!DOCTYPE html>
<html>
<head>
<title>TestMenu </title>
</head>
<style type="text/css">
.container{
padding: 0px 10px;
background-color: #eee;
}
ul li a{
width:60px;
text-align: center;
color: red;
}
ul{
border: red solid 1px;
width: 492px;
}
ul li{
width: auto;
display: inline-block;
padding: 5px;
margin: auto;
}
</style>
<body>
<div class="container">
<ul>
<li><a href="#">Lundi</a></li>
<li><a href="#">Mardi</a></li>
<li><a href="#">Mercredi</a></li>
<li><a href="#">Jeudi</a></li>
<li><a href="#">Vendredi</a></li>
<li><a href="#">Samedi</a></li>
<li><a href="#">Dimanche</a></li>
</ul>
</div>
</body>
</html>
我的猜测是,这是由于继承的内容或浏览器特定的,但我无法弄清楚到底是什么。
答案 0 :(得分:5)
您必须添加此选择器display:block
:
ul li a{
display:block;
width:60px;
text-align: center;
color: red;
}
display:block 表示元素显示为块,因为段落和标题始终如此。一个块在它上面和下面有一些空格,并且在它旁边不允许任何HTML元素,除非另有命令(例如,通过向另一个元素添加浮动声明)。
display:inline 表示该元素以内联方式显示在同一行的当前块内。只有当它在两个块之间时,该元素才会形成一个“匿名块”,但它具有尽可能小的宽度。
答案 1 :(得分:4)
默认情况下,锚点是内联元素,因此不占用宽度。如果您将其更改为display: inline-block
,您将获得所期望的结果。
ul li a{
width:60px;
display: inline-block;
text-align: center;
color: red;
}
答案 2 :(得分:1)
Anchor
元素默认为inline
个元素,即它们只占用所需的空间。如果您希望它们根据您指定的内容占用空间,则需要将它们设为inline-block
。
所以,基本上你必须将你的CSS类重新定义为:
.container ul li a {
color:red;
display:inline-block; /*Add this*/
text-align: center;
width:60px;
}
您可以在此处查看示例 - &gt; http://jsfiddle.net/jxmUY/
希望这有帮助!!!