持续 <li> 不内联，显示它的大小

Question

So for my webpage I am making a dropdown menu from scratch. So I have a header which contains 5 list items and a logo. Let's call the list items tab1, tab2, tab3, tab4 and tab5. My goal is to have tab1, tab2, tab3, tab4 and the logo display inline, but have tab5 display right below tab4. To do this, I set the first 4 tabs and the logo to have have the property display: inline-block and the 5th tab to be just display: block. This solves the issue of having the fifth tab display under the other tabs and the logo, though the fifth tab does not retain the same width as the other tabs, even though they are classified under the same class .tab. What ends up happening is the fifth tab becomes the width of the body. I tried to fix this by setting the left and right padding of the tab manually, though this does not work. Is there a way I can have the fifth tab act/display exactly like the other tabs (as in same width, height, etc.), just not displayed inline?

Here's my 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>

And here's my 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;
}

Here's a jsfiddle demonstration: https://jsfiddle.net/gobtt6vk/

Thanks!

Answer 1

The #tab5 is occupying 100% of the body 's width because that's what display:block; does.

You can solve this problem by giving it a width , for example:

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

Or you can solve it by giving it a display:table; instead of display:block; so you wont need to give it a fixed width , it will adjust itself to the text.
Also your HTML structure should be improved, so I wasted a little bit of time here and reorganized it for you.

Here's an online example: 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

try this updated code ...

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