html - Empty space after unordered list item -
there unwanted space after unordered list shown in ie , firefox in last html <li>
item can't removed reducing ul width. have idea how remove space? thanks.
#menubar { width:249px; margin:0 auto; list-style:none; border:1px solid grey; border-radius:3px; margin-top:5px; padding:0; height:26px; } .toggle { margin:0; line-height:16px; float:left; border-right: 1px solid grey; padding:5px 8px 5px 8px; } .selected { background-color:grey; }
<body> <ul id="menubar"> <li class="toggle selected">html</li> <li class="toggle">html</li> <li class="toggle">html</li> <li class="toggle selected" style="border-right:none;">html</li> </ul> </body>
don’t specify fixed width on ul
, make display inline-block
instead. (and if need horizontally centered, use text-align:center
on parent element.)
div { text-align:center; } #menubar { display:inline-block; margin:0 auto; list-style:none; border:1px solid grey; border-radius:3px; margin-top:5px; padding:0; height:26px; text-align:left; /* reset text-align list contents, if necessary */ } .toggle { margin:0; line-height:16px; float:left; border-right: 1px solid grey; padding:5px 8px 5px 8px; } .selected { background-color:grey; }
<body> <div> <ul id="menubar"> <li class="toggle selected">html</li> <li class="toggle">html</li> <li class="toggle">html</li> <li class="toggle selected" style="border-right:none;">html</li> </ul> </div> </body>
Comments
Post a Comment