Равномерно распределенная навигационная панель с зависанием, который заполняет весь элемент li

Question

Я попытался найти решение моей проблемы, и многие другие проблемы были похожи, но я не могу по-видимому взломать этот. CSS никогда не был моим сильным моментом, поэтому я пытался лучше понять макеты жидкостей.

У меня есть панель навигации с 3 ссылками. Я хочу, чтобы каждая ссылка занимала одинаково распределенное пространство и когда пользователь наводил курсор на ссылку, я хочу выделить весь элемент li. Проблема заключается в том, что последний маленький раздел на правой стороне навигационной панели всегда оставляет пространство, когда оно зависнет. Это сводит меня с ума. Кроме того, если вы уменьшите размер браузера, в конце концов, появится самая левая ссылка. Я также хочу попытаться избежать этого, но я не могу заставить его работать. Jsfiddle here

Любые предложения?

HTML:

<nav> 
     <ul> 
      <li> 
       <a href="managers.html"> 
        Building Managers and Owners 
       </a> 
      </li> 
      <li> 
       <a href="contractors.html"> 
        Contractors 
       </a> 
      </li> 
      <li> 
       <a href="architects.html"> 
        Architects 
       </a> 
      </li> 
     </ul> 
    </nav> 

CSS:

nav { 
    background:  #303030; 
    font-size:  1em; 
    font-weight: 100; 
    height:   40px; 
    line-height: 40px; 
    margin:   0 auto 2em auto; 
    padding:  0; 
    width:   100%; 

    border-radius:   5px; 
    -moz-border-radius:  5px; 
    -webkit-border-radius: 5px; 

} 

nav ul{ 
    width:  100%; 
    maring:  0; 
    padding: 0; 
    overflow: hidden; 
    list-style: none; 
} 

nav li {  
    width:   33.1%; 
    float:   left; 
    text-align:  center; 
    border-left: 1px inset; 
    border-right: 1px inset; 
    padding:0; 
} 


nav a:link, nav a:visited 
{ 
    color:    #FFF; 
    text-decoration: none; 
} 

nav li:hover { 
    background:  #556e8c; 
} 

nav li:first-child { 
    border-right: 1px inset; 
    border-left: none; 
} 

nav li:last-child { 
    border-right: none; 
    border-left: 1px inset; 
} 




nav li:first-child:hover { 

    border-top-left-radius:    5px; 
    -moz-border-radius-topleft:   5px; 
    -webkit-border-top-left-radius:  5px; 
    border-bottom-left-radius:   5px; 
    -moz-border-radius-bottomleft:  5px; 
    -webkit-border-bottom-left-radius: 5px; 
    } 

nav li:last-child:hover { 
    border-top-right-radius:    5px; 
    -moz-border-radius-topright:   5px; 
    -webkit-border-top-right-radius:  5px; 
    border-bottom-right-radius:    5px; 
    -moz-border-radius-bottomright:   5px; 
    -webkit-border-bottom-right-radius:  5px; 
}  

Answer 1

Использование display: table (и table-cell, это CSS таблицы макета не связанные с использованием элементов таблицы HTML и их бедные семантика, когда они Арен 't для отображения данных ...) позволяет ссылкам оставаться на одной строке. Я думаю, что это также решает вашу проблему пробела справа, но я не уверен.

http://jsfiddle.net/53dpC/2/

• Каждый Li отображается как display: table-cell и родителем, как display: table. Здесь ul отображается как строка, но в таком простом случае она может отображаться как display: table, а nav отображается как по умолчанию (в виде блока).
• Остерегайтесь, что на Firefox это довольно строгое и нет поля или отступов на «строке», без фонового цвета и т. Д.
• Отсутствие поля на «ячейках», но заполнение в порядке. пограничный крах и пограничный интервал. «Таблица» может иметь разницу, как могла бы иметь таблица HTML.
• table-layout: fixed запускает другой алгоритм компоновки таблиц, очень разные: ширина, которую вы установили, отображается браузерами. Без него браузеры будут адаптироваться к длине контента (и они могут создавать чудеса с очень странным контентом, но это обычно не то, что вы намереваетесь!)
• Префиксы на border-radius больше не нужны: они предназначались для версий Firefox и Chrome/Safari, которые теперь полностью исчезли: Fx 3.6, Android 2.1, Safari 4- (caniuse)