Navigation Bar is not inline at higher zoom

Question

I have made a simple navigation bar but the list-items are not inline at a little higher zooms.

HTML

<ul>
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
<li><a href="#">Type 3</a></li>
<li><a href="#">Type 4</a></li>
</ul>

CSS

li{
display:inline;
float:left;
}

li a {
display:block;
width:155px;
text-align:center;
}    

ul {
background-color:#999999;
border:1px solid #006666;
height:25px;
list-style-type:none;
margin:0;
padding:0;
}

Here is the fiddle for the code!

http://jsfiddle.net/CCCMC/3/

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Changing the width to make it fit will definitely work, or you could try this (modified from: Fluid width with equally spaced DIVs)

html:

<ul>
    <li><a href="#">Type 1</a></li>
    <li><a href="#">Type 2</a></li>
    <li><a href="#">Type 3</a></li>
    <li><a href="#">Type 4</a></li>
    <li class="stretch"></li>
</ul>

CSS:

li{
    display:inline-block;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1    
}

li a {
    text-align:center;
    background-color:green;
}    

ul {
    background-color:#999999;
    border:1px solid #006666;
    height:25px;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;    
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

See it on JS fiddle: http://jsfiddle.net/CCCMC/45/

This allows for different sizes/a different number of menu items.

(Remember to add the *zoom:1; *display:inline; fix for IE6/7 if you need it)

edited May 23 '17 at 12:12

Community

1
1

answered Jan 03 '13 at 11:42

ShaunYearStrong

230
2
9

The fiddle is similar to mine! – Sumit Gera Jan 03 '13 at 11:44
Quite right, I forgot to update it with the changes, I've done it now, the link has been changed. Good spotting!. – ShaunYearStrong Jan 03 '13 at 14:30
Actually I have gone with a fixed-width navigation bar! BTW why have you used class stretch? – Sumit Gera Jan 03 '13 at 20:08
it forces the outer container to take up 100% of the width but still allows the internal elements to calculate their spacing based on it's width. – ShaunYearStrong Jan 14 '13 at 10:45

score 0 · Answer 2 · answered Jan 03 '13 at 11:42

0

just adjust the 'width:155px;' property for 'li a' selector. i checked the 125px value is looking good.

answered Jan 03 '13 at 11:42

naresh kumar

2,165
3
19
21

score 0 · Answer 3 · answered Jan 03 '13 at 11:46

this works: http://jsfiddle.net/CCCMC/3/

You defined the height of ul, when you zoom it doesn't fit on one line anymore. So I deleted the height, and used display: inline-block instead of float: left so you don't need to define the height anymore.

Just study the code, it's pretty much self-explanatory.

li{
    display:inline-block;
    width:155px;
    text-align:center;
}  

ul {
    background-color:#999999;
    border:1px solid #006666;
    list-style-type:none;
    margin:0;
    padding:0;
}

Navigation Bar is not inline at higher zoom

3 Answers3