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

Nonsensical Padding in HTML List

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

Nonsensical Padding in HTML List

Screenshots

Behavior

HTML

CSS

Reset CSS

精彩评论

关注公众号

热门标签

图文推荐

Nonsensical Padding in HTML List

Screenshots

Behavior

HTML

CSS

Reset CSS

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：