CSS динамическое горизонтальное меню навигации для заполнения определенной ширины (поведение таблицы)

Мне нужно создать горизонтальное меню навигации с изменяющимся количеством элементов (это важно - я не могу жестко кодировать ширину в CSS, и я не хочу вычислять их с помощью JS), которые заполняют до определенной ширины, скажем, 800px.

с таблицами, enter image description here

<table width="800" cellspacing="0" cellpadding="0">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five Seven</td>
  </tr>
</table>

<style>
table td {
      padding: 5px 0;
      margin: 0;
      background: #fdd;
      border: 1px solid #f00;
      text-align: center;
    }
</style>

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

поскольку меню не является семантически правильным использованием таблицы, можно ли это сделать, скажем, со списком и чистым CSS?

9
css html html-table menu navigation

4 ответов

на браузеры, которые поддерживают отображение таблицы правила CSS, да:

<style>
  nav {display:table; width:800px; background:yellow}
  ul {display:table-row; }
  li {display:table-cell; border:1px solid red}
</style>

<nav>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five Seven</li>
 </ul>
</nav>

в принципе, вам нужно будет создать таблицу токенов. В действии: http://jsbin.com/urisa4

в противном случае: нет, если вы не можете компромисс ваши требования.

10

вы можете сделать что-то вроде этого:

<style type="text/css">
#container { width: 800px ; border: 1px dashed #333; }
#container div { width: inherit; display: table-cell; background: #ccc}
</style>

<div id="container">
    <div>Something</div>
    <div>Something</div>
    <div>Something</div>
</div>

таким образом, он заполняет то, что вы хотите, но может вырасти до многих элементов.

надеюсь, что это помогает.

3

единственный способ сделать это с помощью CSS, это трудно-код width на li элементы (если вы будете использовать следующую структуру):

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Seven</li>
  </ul>

ul {
    width: 80%; /* or whatever */
}

ul li {
    width: 16%;
    padding: 1%;
}

JS Fiddle demo.

это оставляет, потенциально, "неиспользованный" 10% (для использования для margin или дополнительные padding).

в какой-то момент в будущем расчеты css возможно, удастся выполнить это более плавно.

1

это работает, но я не думаю, что вы хотите, чтобы некоторые думают :)

<div class="master">
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>aölsdkfaösdlfk</li>
        <li>yeah baby</li>
        <li>hi</li>
    </ul>
</div>

.master {
   width:800px;
   background-color:black;
   height:100px;
   color:white;
    display:table;
}
table {
 width:100%;   
}

ul {
 display:table-row;  
 width:100%; 
}
li {
 display:table-cell;  
 width:auto; 
 margin:1px;
 border:1px solid white;
 background-color:red;
 text-align:center;
    vertical-align:middle;
}

http://jsfiddle.net/UnNyS/

1