Question

因此，对于我的网页，我从头开始制作一个下拉菜单。所以我有一个标题，其中包含5个列表项和一个徽标。让我们调用列表项tab1，tab2，tab3，tab4和tab5。我的目标是将tab1，tab2，tab3，tab4和徽标显示为内联，但tab5下面有tab5。为此，我将前4个选项卡和徽标设置为具有属性显示：inline-block和第5个选项卡，只显示：block。这解决了在其他选项卡和徽标下显示第五个选项卡的问题，尽管第五个选项卡不会保留与其他选项卡相同的宽度，即使它们属于同一类.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

#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>不内联，将其大小调整

2 个答案: