无法理解我的宽度值

时间:2014-06-20 18:23:55

标签: html css

有人可以告诉我为什么当我明确将其设置为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>

我的猜测是,这是由于继承的内容或浏览器特定的,但我无法弄清楚到底是什么。

3 个答案:

答案 0 :(得分:5)

您必须添加此选择器display:block

ul li a{
        display:block;
        width:60px;
        text-align: center;
        color: red;
    }

fiddle

display:block 表示元素显示为块,因为段落和标题始终如此。一个块在它上面和下面有一些空格,并且在它旁边不允许任何HTML元素,除非另有命令(例如,通过向另一个元素添加浮动声明)。

display:inline 表示该元素以内联方式显示在同一行的当前块内。只有当它在两个块之间时,该元素才会形成一个“匿名块”,但它具有尽可能小的宽度。

来源:http://quirksmode.org/css/css2/display.html

答案 1 :(得分:4)

默认情况下,锚点是内联元素,因此不占用宽度。如果您将其更改为display: inline-block,您将获得所期望的结果。

ul li a{
    width:60px;
    display: inline-block;
    text-align: center;
    color: red;
}

请参阅此小提琴:http://jsfiddle.net/jkrehm/W7LHw/1/

答案 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/

希望这有帮助!!!