CSS панель навигации централизовано без просветов между кнопками

Question

Добрый вечер,

Я хотел бы иметь навигационную панель, которая централизована на экран без зазоров между кнопкой. Я понял, что пробелы можно закрыть, имея «плавать: левый». однако это приведет к тому, что панель навигации будет сброшена влево. без «float: left», будут отсутствовать промежутки, но централизованные. был бы признателен, если бы кто-нибудь мог мне помочь. Спасибо!

мои CSS коды являются следующие:

#nav { 
    list-style: none; 
    font-weight: bold; 
    margin-bottom: 10px; 
    width: 100%; 
    text-align: center; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0; 
} 

#nav li { 
    margin: 0px; 
    display: inline; 
} 

#nav li a { 
    padding: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #086ba9; 
    float: left 
} 

#nav li a:hover { 
    color: #FFFFFF; 
    background-color: #35af3b; 
} 

Ниже мой частичный HTML код:

<div id="nav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Crawler</a></li> 
     <li><a href="#">Visual Analytics</a></li> 
    </ul> 
</div> 

Cheers, ZH

Answer 1

Вот рабочий код:

http://jsfiddle.net/surendraVsingh/vU4C8/1/

Изменения быть сделано в CSS:

#nav ul { 
list-style-type: none; 
padding: 0; 
display:inline-block; /* Add This*/ 
} 

Примечание:display:inline-block добавляют так, что ul будет принимать только ширину в соответствии с его Ли в отличие от других элементов блока, которые принимают ширину 100%.

Answer 2

я не знаю, если этот подход является «здоровым» или нет, но он сделал трюк для меня

#nav ul a{margin:0 -2px;}