最后一个 <li> 不是内联，弄乱了它的大小

Question

所以对于我的网页，我正在从头开始制作一个下拉菜单。所以我有一个包含 5 个列表项和一个徽标的标题。我们将列表项称为 tab1、tab2、tab3、tab4 和 tab5。我的目标是让 tab1、tab2、tab3、tab4 和徽标内联显示，但让 tab5 显示在 tab4 的正下方。为此，我将前 4 个选项卡和徽标设置为具有属性 display: inline-block 和第 5 个选项卡仅显示：块。这解决了在其他选项卡和徽标下显示第五个选项卡的问题，尽管第五个选项卡不保留与其他选项卡相同的宽度，即使它们被归类为同一类 .tab。最终发生的是第五个选项卡变成了正文的宽度。我试图通过手动设置选项卡的左右填充来解决此问题，但这不起作用。有没有办法让第五个选项卡的行为/显示与其他选项卡完全一样（宽度、高度等），而不是内联显示？

这是我的html：

<div class="header">
    <a class="tab" id="tab1"><li>Home</li></a>
    <a class="tab" id="tab2"><li>About</li></a>
    <img src="images/logo.png" id="logo" width="260px" height="95px;"/>
    <a class="tab" id="tab3"><li>Menu</li></a>
    <a class="tab" id="tab4"><li>Order</li></a>
    <a class="tab" id="tab5"><li>Cater</li></a>
</div>

这是我的 CSS：

li {
    list-style-type: none;
}
.header{
    text-align: center;
    background-color: red;
}
.tab, #logo{
    padding-right: 2.4%;
    padding-left: 2.4%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid black;
}
#tab5{
    margin-top: 10px;
    display: block;
}

这是一个 jsfiddle 演示：https://jsfiddle.net/gobtt6vk/

谢谢！

Answer 1

试试这个更新的代码...

CSS：

li {
    list-style-type: none;
}
.header{
    text-align: center;
    background-color: red;
}
.tab, #logo{
    padding-right: 2.4%;
    padding-left: 2.4%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid black;
}
#tab5{
    margin-top: 5p;
}

Answer 2

#tab5 占据了 body 的 width 的 100%，因为 display:block; 就是这样做的。

你可以给它一个width来解决这个问题，例如：

#tab5 {
    display: block;
    width: 30px;
    margin: 10px auto 0 auto; /* this aligns #tab5 to center and also gives margin-top:10px; */
}

或者你可以通过给它一个display:table;而不是display:block;来解决它，这样你就不需要给它一个固定的width，它会根据文本自行调整。
另外你的HTML结构应该改进一下，所以我在这里浪费了一点时间，为你重新整理了一下。

这是一个在线示例：https://jsfiddle.net/wujncnsd/

<div class="header">
    <ul>
        <li id="tab1" class="tab"><a>Home</a></li>
        <li id="tab2" class="tab"><a>About</a></li>
        <li id="logo">
            <img src="images/logo.png" width="260" height="95"/>
        </li>
        <li id="tab3" class="tab"><a>Menu</a></li>
        <li id="tab4" class="tab"><a>Order</a></li>
        <li id="tab5" class="tab"><a>Cater</a></li>
    </ul>
</div>

ul {margin: 0; padding: 0;}
li {list-style-type: none;}

.header{
    text-align: center;
    background-color: red;
}
.tab, #logo{
    padding-right: 2.4%;
    padding-left: 2.4%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid black;
}
#tab5{
    margin: 10px auto 0 auto;
    display: table;
}