100% горизонтальное кросс-браузерное меню HTML / CSS?

Question

Как сделать 100% горизонтальный кросс-браузер меню HTML / CSS? 1.с сохранением чистоты HTML, li список 2.нет изображения / JavaScript, без таблицы, соответствие стандартам W3C Пример для неверный пример:

/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
    text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
    display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
    display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
    display:inline;
}

и:

<div id="nav">
    <ul>
        <li>Home <!--unfortunately it doesn't work without space after each list, 
                                                 need for some solution--></li>
        <li>Services </li><!--don't want to add style for each list separated-->
        <li>Portfolio </li>
        <li>Clients </li>
        <li>Articles </li>
        <li>Contact Us </li>
        <li id="span"></li><!--don't like to add any extra tag (like this),
                               but other way it doesn't work,
                               need for some solution-->
    </ul>
</div>

Answer 1

CSS2.1 table, table-cell поддерживается начиная с IE8 и улучшен рендеринг благодаря table-layout:fixed.К сожалению, у него есть ограничения макета, такие как margin.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

. "При" фиксированном "методе компоновки вся таблица может быть отображена после первой строки таблицы.загружен и проанализирован. Это может ускорить время рендеринга по сравнению с «автоматическим» методом макета, но последующее содержимое ячейки может не вписаться в предоставленную ширину столбца. Любая ячейка, содержимое которой переполняется, использует свойство переполнения, чтобы определить, следует ли ограничивать содержимое переполнения. "

Демо http://jsbin.com/AgiMoxu/9/edit

<style>
ol {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  white-space: nowrap;
}
li {
  overflow: hidden;
  display: table-cell;
  padding: 10px;
  text-overflow: ellipsis;
}
</style>
<ol>
  <li>Home
  <li>Section two
  <li>Section three
  <li>Another section
  <li>A section with a longer name
  <li>Section six
  <li>This is section seven
  <li>Section 8
</ol>

Answer 2

Попробуйте только немного менее хакерскую версию:

<style type="text/css">    
#nav ul {
    list-style: none;
    display: table;
    *display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: table-cell;
    *display: inline;
    width: auto;
    min-width: 100px;
    margin: 1px 0;
    padding: 2px auto;
    *padding: 2px 40px;
    border: 1px solid #999;
    text-align: center;
    white-space: nowrap;
}
</style>
<div id="nav">
    <ul>
        <li>Home</li>
        <li>Services</li>
        <li>Portfolio</li>
        <li>Clients</li>
        <li>Articles</li>
        <li>Contact Us</li>
    </ul>
</div>

Именно IE7 вызывает проблемы.

Answer 3

Для этого есть обходной путь, даже без таблиц.Это не очень красиво, но работает.

Хитрость в том, что вы упорядочиваете их как встроенные элементы в выровненном текстовом блоке.Слова оправданного текста будут делать то, что вы хотите с вашими ярлыками.Но поскольку последняя строка выровненных текстовых блоков выровнена по левому краю, необходимо завершить блок новой строкой.

Непроверенный пример приведен здесь:

<style>
.label {
    display: inline-block;
}
</style>

<div style="display: block; width: 100%; text-align: justify"><div class="label">label1</div>
<div class="label">label2</div>
<div class="label">label3</div><br /></div>

Предупреждение # 1:это не будет работать, если родителем внешнего div (который я не помещаю в этом примере) является width: auto.

Предупреждение # 2: перед первым не должно быть пробелов, ипосле последних - и их родители!Но между внутренними метками у вас должен быть (хотя бы один) пробел.

Предупреждение # 3: после вашего последнего div будет помещен ненужный символ новой строки.Если это проблема для вас, есть несколько решений, чтобы она исчезла, но они еще не лучше.