Geek Answers Handbook

Unusual HTML list padding

I have a list of HTML, as well as millions of others I made ... and the way it behaves just scares me.

Basically there is only this invisible addition on the right side of each element. I can’t say if it is in a hyperlink, a list item or what ... but that’s all I have for your assessment.

Screenshots

Behavior

Actual behaviorChrome inspection

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

CSS Reset

 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; }
+4
source share
2 answers

If you have spaces between you <li> elements, remove this and no more weird space in the user interface. The return that you have causes this.

I created http://jsfiddle.net/59sTg/1/ to show you that it works without spaces.

This is ultimately the result of the display:inline-block; attribute display:inline-block; . One of many ways to solve this issue (besides simply removing the space / return, use float:left instead of display:inline-block . Alternatively, if you want to keep it exactly as it happens, sometimes using comments can help with formatting

 <li>someLink</li><!-- --><li>secondLink</li>

edit : I updated jsfiddle to include both methods (the latter shows you how to swim using a class called myfloatedelement , although I would recommend a bit of CSS / classes rebuild, I did it pretty fast 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; }
+3
source

This is usually fairly easy to fix, but there are a few elements that can be used for filling / fields. The easiest way to say is to use chrome and hover over the html code using the "check element" function (right-click to find it) - one of the elements in the document will have visible indentation / margins that correspond to what we see on your screenshot

My first guess is to ask what happens if you put each link to the left?

 #menu ul li a { float: left; display: block; }

otherwise, what happens if you install:

 #menu ul li{ display: block; float: left; } #menu ul{ overflow: auto; }
+1
source

More articles:


All Articles