Hi check here http://jsfiddle.net/j5LLR/1/ it works. The problem is because of using:
display: inline-block;
to your ul. So i ve added
vertical-align: top;
there too. Unfortunately inline-block causes many weird space issues.
题
I have this html code:
<nav>
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</nav>
And this css:
nav {
display:block;
}
nav ul {
display:inline-block;
width:100%;
list-style-type: none;
margin:0;
padding:0;
}
nav ul li {
float: left;
width: 100px;
height:100%;
margin-right: calc((100% - 500px) / 4);
}
nav ul li:last-child { margin-right:0; }
nav a {
display:inline-block;
width:100%;
height:100%;
}
As seen on jsfiddle there is white space after ul but nav is higher. Setting ul to 100% doesn't help and it doesn't seem to be margin. What is it? The space: http://i.imgur.com/NSKqsUV.png
解决方案
Hi check here http://jsfiddle.net/j5LLR/1/ it works. The problem is because of using:
display: inline-block;
to your ul. So i ve added
vertical-align: top;
there too. Unfortunately inline-block causes many weird space issues.
其他提示
Make the body
have margin: 0
.
That will fix the problem!
Here's the fiddle:
Change the vertical-align
for ul
for default is baseline
making the calculation with line-height
and other values create that gap:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
nav ul {
vertical-align:top;
}
The demo http://jsfiddle.net/n9uu4/2/