Многорядный CSS Nav - PullRequest
Новая
       10

Многорядный CSS Nav

0 голосов
/ 23 марта 2011

Я создаю переключатель панели содержимого с 6 элементами навигации в 2 рядах.Итак, 3 предмета в каждом ряду.Всего 6 элементов, 2 строки, 3 столбца, причем каждый столбец выровнен по левому краю.Как мне создать это с минимальным количеством HTML.Я уверен, что смогу сделать это, но я не хочу добавлять кучу дивов и барахла.Помогите?:)

Ответы [ 3 ]

1 голос
/ 23 марта 2011

HTML-код будет похож на этот 

  <div id="nav"> 
    <ul> 
        <li>data</li> 
        <li>data</li> 
    </ul> 
    <ul> 
        <li>more data<li> 
        <li>more data</li> 
    </ul> 
    <ul>
        <li>even more data<li> 
        <li>even more data</li> 
    </ul>

</div>

, а CSS будет 

ul { 
    float: left; 
    list-style: none;
}

Мой ответ похож на ggregoire, за исключением того, что вы запросили 3 элемента в 2 рядах.Я не могу оставлять комментарии, поэтому мне пришлось написать новый ответ.

0 голосов
/ 23 марта 2011

HTML: 

<div id="navtabs">
    <ul>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
    <ul id="right">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
</div>

CSS: 

ul {
    float: left;
}

#right {
    margin-left: 10px;
}

Пример: http://jsfiddle.net/ddYsk/

0 голосов
/ 23 марта 2011

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

Если это горизонтальное меню, используйте li {float:left}, в противном случае используйте только теги A в списке, а не LI для достижения наилучших результатов.

Простое меню: 

<ul>
   <li><a href="">item A</a></li>
   <li><a href="">item B</a></li>
</ul>

Многоуровневое меню. 

.menu {
  ul li { position:relative; float:left }
  ul li a { display:block; ... your styles ...}
  ul li ul {position:absolute ..position as needed ...}
  ul li ul li {float:none}
}

<div class='menu'>
<ul>
   <li><a href="">item A</a>
      <ul>
        <li><a href="">item A-1</a></li>
        <li><a href="">item A-2</a></li>
     </ul>     
   </li>
   <li><a href="">item B</a></li>
</ul>
</div>

Лучше всего использовать это со сбросом CSS: http://developer.yahoo.com/yui/reset/

...