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

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

谢谢。