Пустой пробел после неупорядоченного списка item

В последнем элементе HTML <li> появляется нежелательное пространство после неупорядоченного списка, отображаемого в IE и Firefox, который не может быть удален с уменьшением ширины ul. У кого-нибудь есть идея, как удалить пространство? Благодарю.Пустой пробел после неупорядоченного списка item

#menubar { 
 
    width:249px; 
 
    margin:0 auto; 
 
    list-style:none; 
 
    border:1px solid grey; 
 
    border-radius:3px; 
 
    margin-top:5px; 
 
    padding:0; 
 
    height:26px; 
 
} \t 
 
.toggle { 
 
    margin:0; 
 
    line-height:16px; 
 
    float:left; 
 
    border-right: 1px solid grey; 
 
    padding:5px 8px 5px 8px; \t 
 
} 
 
.selected { 
 
    background-color:grey; \t \t 
 
}

<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> \t \t 
 
    </ul> 
 
</body>

источник

2015-06-18 Farzad

Не указывать фиксированную ширину на ul, но сделать его отображения в качестве inline-block вместо этого. (А если вам это нужно горизонтально по центру, а затем использовать text-align:center на родительский элемент.)

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 for list contents, if necessary */ 
 
} \t 
 
.toggle { 
 
    margin:0; 
 
    line-height:16px; 
 
    float:left; 
 
    border-right: 1px solid grey; 
 
    padding:5px 8px 5px 8px; \t 
 
} 
 
.selected { 
 
    background-color:grey; \t \t 
 
}

<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> \t \t 
 
    </ul> 
 
    </div> 
 
</body>

источник

2015-06-18 19:10:07 CBroe

Пустой пробел после неупорядоченного списка item

ответ

Смежные вопросы