Nonsensical Padding in HTML List
I have an HTML list, like millions of others I have made ...and the way it is behaving is just really confounding me.
Basically there is just this invisible padding on the right side of each element. I can't tell if it is on the hyperlink, the list item, or what... but this is everything I have, for your evaluation.
Screenshots
Behavior
HTML
<body>
<br class="space" />
<div class="container">
<nav id="menu">
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</nav>
<div id="main">
@RenderBody()
</div>
</div>
</body>
</html>
CSS
body {
background-color: #5C87B2;
font-family: Arial;
font-size: 80%;
}
#menu {
background-color: #E0E0E0;
border: solid 1px #000;
text-align: right;
}
#menu ul { margin: 0; padding: 0; display: block; }
#menu ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
#menu ul li a {
padding: 5px 20px;
font-weight: bold;
text-decoration: none;
line-height: 1.8em;
开发者_如何学运维 display: block;
border: 0px solid #000;
border-width: 0 0 0 1px;
}
#menu ul li a:hover{
background-color: #fff;
}
#main {
background: white;
padding: 15px;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
overflow: auto;
}
/* --------------------------------------------------------
the content positioning and styling containers
-----------------------------------------------------------*/
#content { padding: 10px 0 0 0; clear: both; }
Reset CSS
body { margin: 0; padding: 0; border: 0; }
/* --------------------------------------------------------
remove the floating dots on list elements within
navigation containers
-----------------------------------------------------------*/
nav ol, nav ul { list-style:none; }
/* --------------------------------------------------------
clear floating styles and make sure that certain
things fit within appropriate bounding boxes.
-----------------------------------------------------------*/
.clear { clear: both; }
.clearfix { overflow: auto; margin: 0; padding: 0; }
.space { position: relative; top: 5px; }
.padded { padding: 10px; }
/* --------------------------------------------------------
allow class level placement of floating styles.
-----------------------------------------------------------*/
.right { float: right; }
.left { float: left; }
/* --------------------------------------------------------
some default layout elements.
-----------------------------------------------------------*/
hr {
display:block;
height:1px;
border:0;
border-top: 1px solid #2A2A2A;
padding:0;
}
/* --------------------------------------------------------
the default content container
-----------------------------------------------------------*/
.container {
width: 1024px;
min-width: 990px;
margin: 0 auto;
position: relative;
}
code { font-size: 1.2em; }
a:link, a:visited, a:active { color: inherit; text-decoration: none; }
You have whitespace between you <li> elements, remove that and no more odd space in the UI. The return that you have causes this.
I created a http://jsfiddle.net/59sTg/1/ to show you that it works without the whitespace.
Ultimately this is a result of the display:inline-block; attribute. One of many ways of solving this (besides just removing the whitespace/return is by using float:left instead of display:inline-block. Alternatively, if you want to keep it exactly how it is, sometimes using comments can help with formatting
<li>someLink</li><!--
--><li>secondLink</li>
edit: I updated the jsfiddle to include both methods (the latter shows you how to float, using a class called myfloatedelement, albeit I would recommend re-organizing the CSS/classes a bit, I did it pretty quick and dirty)
<nav id="menu" class="myfloatedelement">
<ul>
<li><a ref="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</nav>
--
.myfloatedelement{
overflow:auto;
}
.myfloatedelement ul{
float:right;
overflow:auto;
}
.myfloatedelement ul li{
float:left;
}
This is usually easy enough to fix but there are a few elements which could be applying the padding/margin - the easiest way to tell is by using chrome and hovering over the html code using the "inspect element" feature (right click to find it) - one of the elements in the document will visibly appear to have padding/margin which corresponds to that which we see in your screenshot
My first guess is to ask what happens if you float each link to the left?
#menu ul li a {
float: left;
display: block;
}
failing that, what happens if you set:
#menu ul li{
display: block;
float: left;
}
#menu ul{
overflow: auto;
}
加载中,请稍侯......
精彩评论