динамическая ширина spacer в горизонтальном меню CSS

Question

У меня есть простое горизонтальное меню (см. Ниже). Некоторые элементы перемещаются влево, а некоторые плавают вправо (справа направо - параметры администратора и отображаются на каждой странице, в то время как те, которые находятся слева, являются контекстными. Каждый элемент меню имеет границы, которые делают их отображаемыми как поднятые кнопки. d как элемент спейсера между левым и правым плавающими элементами, который также обозначен как поднятая кнопка.

Моя проблема в том, что я не могу понять, как (в чистом виде CSS, представленном «ul.menu li.spacer "в CSS ниже), чтобы растянуть ширину разделителя, чтобы заполнить доступное пространство между левым и правым элементами. Ширина разделителя будет отличаться в зависимости от контекста, поскольку количество и ширина других элементов варьируются в зависимости от в контексте.

Я могу написать javascript для dynamica lly установил ширину разделителя, но это должно было быть специфичным для браузера, поскольку разные браузеры обрабатывают границы/поля по-разному, и я не хочу этого делать и получаю ДЕЙСТВИТЕЛЬНО некрасиво.

[Обратите внимание, что плавали правые элементы перечислены в обратном порядке они будут появляться на экране из-за поплавком вправо]

<ul class='menu'> 
    <li class='left'><a href='xxx'>Item One</a></li> 
    <li class='left'><a href='xxx'>Item Two</a></li> 
    <li class='left'><a href='xxx'>Item Three</a></li> 
    <li class='left'><a href='xxx'>Item Four</a></li> 
    <li class='right'><a href='xxx'>Item Eight</a></li> 
    <li class='right'><a href='xxx'>Item Seven</a></li> 
    <li class='right'><a href='xxx'>Item Six</a></li> 
    <li class='right'><a href='xxx'>Item Five</a></li> 
    <li class='spacer'><a href='#'>&nbsp;</a></li> 
</ul> 

и вот мой CSS

ul.menu { 
    width: 100% ; 
    list-style: none ; 
    height: 2em ; 
    margin: 0 ; 
    padding: 0 ; 
    } 
ul.menu li.left { 
    float: left ; 
    } 
ul.menu li.right { 
    float: right ; 
    display: inline-block ; 
    } 
ul.menu li { 
    border: 1px solid ; 
    border-color: #fff #000 #000 #fff ; 
    position: relative ; 
    text-align: center ; 
    vertical-align: middle ; 
    } 
ul.menu li a { 
    padding: 0 1em; 
    } 
ul.menu li.spacer { 
    width: ??? ; 
    } 

Вот fiddle: http://jsfiddle.net/uJCAX/1/

Answer 1

Думаю, вы придерживаетесь довольно сложного подхода. Если вы создадите два разных списка, это будет намного проще, без прокладки.

пример:http://jsfiddle.net/elclanrs/Ar3DH/3/

HTML

<nav id="menu"> 
    <ul id="user"> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
    </ul> 

    <ul id="admin"> 
     <li><a href="#">Five</a></li> 
     <li><a href="#">Six</a></li> 
     <li><a href="#">Seven</a></li> 
     <li><a href="#">Eight</a></li> 
    </ul> 
</nav>​ 

CSS:

#menu { 
    position: relative; 
    background: #ddd; 
    height: 40px; 
    font: bold 15px/40px Arial; 
} 
#admin { 
    position: absolute; 
    right: 0; 
} 
li { float: left; } 
a { 
    display: block; 
    padding: 0 .5em; 
    text-decoration: none; 
} 
​ 

Answer 2

Это использует границы на ul и некоторых псевдо-элементов для достижения эффекта , См. Этот пример скрипта: http://jsfiddle.net/uJCAX/26/. Однако я заметил, что Firefox иногда неправильно отображает левую границу среднего пространства (очевидно, ошибка отображения). Также обратите внимание, что если правильные кнопки «обертываются» до следующего уровня (узкий экран), эффект нарушается.

Вот код (добавлены два last классов):

HTML

<ul class='menu'> 
    <li class='left'><a href='xxx'>One</a></li> 
    <li class='left'><a href='xxx'>Two</a></li> 
    <li class='left'><a href='xxx'>Three</a></li> 
    <li class='left last'><a href='xxx'>Four</a></li> 
    <li class='right'><a href='xxx'>Eight</a></li> 
    <li class='right'><a href='xxx'>Seven</a></li> 
    <li class='right'><a href='xxx'> Six</a></li> 
    <li class='right last'><a href='xxx'>Five</a></li> 
</ul> 

CSS

ul.menu { 
    width: 100% ; 
    list-style: none ; 
    margin: 0 ; 
    padding: 0 ; 
    border-bottom: 1px solid #000; 
    border-top: 1px solid #fff; 
    float: left; 
    } 
ul.menu li.left { 
    float: left ; 
    } 
ul.menu li.right { 
    float: right ; 
    display: inline-block ; 
    } 
ul.menu li { 
    border: 1px solid ; 
    border-color: #fff #000 #000 #fff ; 
    position: relative ; 
    text-align: center ; 
    vertical-align: middle; 
    margin: -1px 0; 
    } 
ul.menu li a { 
    padding: 0 1em; 
    } 
ul.menu li.right.last:before { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: -2px; 
    bottom: 0; 
    width: 0; 
    border-left: 1px solid #000; 
    } 
ul.menu li.left.last:after { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    right: -2px; 
    bottom: 0; 
    width: 0px; 
    border-right: 1px solid #fff; 
    }