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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -