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

Question

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

这是我的 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

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

Answer 2

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

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

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

Last <li> Not Inline, Messes up the Size of it

html

css

html-lists