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

Question

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

со столами,

<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, а элементы меню уменьшаются для размещения дополнительных элементов - все меню никогда не бывает короче или длиннее 800 пикселей.

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

Answer 1

В браузерах, поддерживающих отображение таблицы 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

В противном случае: нет, если вы не можете поставить под угрозу свои требования.

Answer 2

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

<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>  

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

Надеюсь, это поможет.

Answer 3

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

<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/

Answer 4

Единственный способ сделать это с помощью 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 .

Это оставляет, потенциально, «неиспользованный» 10% (будет использоваться для margin или дополнительно padding).

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