Горизонтальные элементы списка в панели навигации

Question

Я пытаюсь построить навигационную панель, как один на GitHub (без использования Bootstrap nav* селекторы - см this jsfiddle

Так у меня есть следующий HTML:

<div class="container" style="margin-top: 20px;"> 
    <div class="span9"> 
     <ul class="unstyled main-tabs"> 
      <li> 
       <a href="#">Link1</a> 
      </li> 
      <li> 
       <a href="#">Link2</a> 
      </li> 
      <li> 
       <a href="#">Link3</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Обратите внимание на span9 класс, который я использую, чтобы заставить панель навигации, чтобы занять только 9/12 моего экрана

И следующий CSS:.

.main-tabs { 
    position: relative; 
    margin-bottom: 20px; 
    font-size: 12px; 
    font-weight: bold; 
    background-color: #eaeaea; 
    background-image: -moz-linear-gradient(#fafafa, #eaeaea); 
    background-image: -webkit-linear-gradient(#fafafa, #eaeaea); 
    background-image: linear-gradient(#fafafa, #eaeaea); 
    background-repeat: repeat-x; 
    border: 1px solid #eaeaea; 
    border-bottom-color: #cacaca; 
    border-radius: 3px; 
} 

.main-tabs a { 
    display: block; 
    text-align: center; 
    line-height: 35px; 
    font-size: 12px; 
    color: #777; 
    text-decoration: none; 
    text-shadow: 0 1px 0 white; 
    border-right: 1px solid #eee; 
    border-right-color: rgba(0,0,0,0.04); 
    border-left: 1px solid #fcfcfc; 
    border-left-color: rgba(255,255,255,0.7); 
    border-bottom: 2px solid #DADADA; 
} 

.main-tabs li { 
    list-style-type: none; 
} 

.main-tabs li .active { 
    border-bottom: 2px solid greenyellow; 
} 

Результат:

Я изменил .main-tabs li на:

.main-tabs li { 
     list-style-type: none; 
     float: left; 
    } 

Тогда

.main-tabs li { 
    list-style-type: none; 
    display: block; 
} 

Это все еще дает те же результаты :(

Но это не помогло.

ВОПРОС без жесткого кодирования ширины li или ul элементов (для вопросов, отзывчивости), есть ли способ, чтобы получить ту же навигационную панель, как один на Github?

Answer 1

старый, испытанный и проверенный способ заключается в использовании таблицы макет:

.nav { 
    display: table; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.nav li { 
    display: table-cell; 
} 

Современный подход заключается в использовании Flexbox (IE 10+, может потребоваться много префиксов, так как есть три версии стандарта):

.nav-alt { 
    display: flex; 
    margin: 0; 
    padding: 0; 
} 

.nav-alt li { 
    flex: auto; 
    list-style-type: none; 
} 

Demo для обеих версий: http://jsfiddle.net/3qM5y/1/

Answer 2

jsFiddle Demo

demo with jQuery and a hover

Есть несколько вопросов, чтобы обратиться. Во-первых, без конкретного определения ширины каждого пункта меню, вы должны использовать вывод ширины. Общим подходом является использование встроенного алгоритма, используемого для вычисления ячеек таблицы. Для этого вам необходимо установить контейнер в display:table, а элементы - display:table-cell.

Кроме того, ul имеет тенденцию иметь отступ по умолчанию, вероятно, вы должны удалить начальное заполнение, используя padding-left: 0px; на контейнере.

Наконец, убедитесь, что ваши якорные элементы будут иметь надлежащий размер. Это означает, что они устанавливают их с display: inline-block; и width:100%.