Question

我尝试使用html列表创建标题但是当我尝试将字体大小更改为较小的值时，它会自动重新调整整个li的大小。

Here is an example of what I mean: 注释掉字体大小标签，看看我的意思......

HTML：

<ul id="header">
<li><a><h1>Home</h1></a>
</li>
<li><a><h1>Link2</h1></a>
</li>
<li><a><h1>Link3</h1></a>
</li>
<li><a><h1>Link4</h1></a>
</li>
<li><a><h1>Link5</h1></a>
</li>
<li><a><h1>Link6</h1></a>
</li>

的CSS：

#header {
    width: 70em;
    height: 4em;
    padding: 0;
    margin: 0;
    margin-bottom: 1px;
    list-style: none
}

#header li {
    /*font-size: 8pt;*/
    color: #FFF;
    display: inline;
    margin-right: -3px;
}

    #header a {
    display: inline-block;
    width: 9.94em;
    height: 4em;
    background: #FDB813;
}

我应该使用div还是有其他解决方案？

Answer 1

请添加：

#header h1{
    font-size: 8pt;  
}

感谢。

Answer 2

您正在使用em unit来设置链接的宽度/高度。

em是相对于字体大小的，所以当你改变它时你也改变它们的尺寸

Answer 3

使用display: inline时，元素的大小取决于文本（以及文本的大小）。有很多方法可以改变这种情况。

如果您希望标题始终占据相同的宽度，请考虑浮动元素并设置百分比宽度，具体取决于元素数量（5个元素= 20％宽度）。

您还可以在#header元素上设置背景颜色，以便始终占用相同的空间量，但链接会更改其中的大小。

Answer 4

我会创建一个div作为标题，然后将ul放入其中。您可以更好地控制样式。要仅更改标签上的字体大小，请添加font-size;到#header a {}。

Answer 5

由于a元素的尺寸已使用em单位设置，因此当元素的字体大小发生变化时，它们会发生变化。这也会更改封闭的li元素的尺寸，因为a元素是其唯一内容。

结论取决于你想要什么。通过使用em单位设置维度，您明确希望它们依赖于字体大小。如果您不想这样，请使用其他单位，例如px（尽管这会不可避免地提出一个问题，即当字体大小增加时会发生什么，使其大于px单位中设置的高度）。

Answer 6

添加css属性

#header a{
    font-size: 8pt;  
}

更改列表字体大小会重新调整整个li的大小

6 个答案: