Question

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

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

Answer 1

您必须添加此选择器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

Answer 2

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

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

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

Answer 3

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/

希望这有帮助!!!

无法理解我的宽度值

3 个答案: