Варианты заполнения меню

У меня есть меню из 8 пунктов, чтобы оно было равномерно распределено по IE, Chrome Firefox, и при просмотре с помощью ipad мне пришлось использовать посторонние отступы в таблице стилей, которые работают, но очень беспорядочны. Не помогает тот факт, что каждый пункт меню имеет разную ширину.

Проведя несколько часов в гугле, я абсолютно ничего не добился. Если возможно, ищите более чистое решение, HTML и CSS ниже

<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Convertible Roofs</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Customer Comments</a></li>
<li class="active"><a href="">Buyers Guide</a></li>
<li><a href="">Leather Care</a></li>
</ul>
</nav>



nav ul {
margin:0;
padding:0;
background:rgba(0,0,0,.2);
}

nav ul li {
display:inline-block;
border-right:1px solid rgba(255,255,255,.2);
margin-right:-3px;
}

nav ul li:last-child {
border-right:none;
}

nav ul li a {
display:inline-block;
padding:14px 21.3px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {  
nav ul li a {
padding:14px 20.7px;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
nav ul li a {
padding:14px 21.3px;
}
}

@-moz-document url-prefix() { 
nav ul li a {
padding:14px 20.7px;
}
}

nav ul li a:hover,nav li.active a {
color:#fff;
background:rgba(0,0,0,.4);
}

html css
person Community    schedule 23.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Посмотрите, сможете ли вы следовать этому как есть; а если нет, то я сделаю тебе скрипку...

Основная предпосылка состоит в том, чтобы заставить элементы вести себя как ячейки таблицы, поэтому вам не нужно заполнение. Я сделал быстрое редактирование в Firebug — посмотрите, сработает ли это для вас:

nav {
    display: table;
    height: 50px;
    width: 100%;
}
nav ul {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    display: table-row;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav ul li {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: table-cell;
    line-height: 50px;
}
nav ul li a {
    color: #fff;
    display: block;
    font-size: 0.938em;
    outline: 0 none;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

Вы можете удалить правило, добавляющее заполнение (строка 170).

Отказ от ответственности: не тестировался ни в чем, кроме Firefox.

person Jayx    schedule 25.06.2014
comment
Я бы рекомендовал добавить пробел: nowrap; to nav ul li a, чтобы предотвратить перенос текста. Также обратите внимание, что этот метод меню не переходит на несколько строк, если ширина экрана слишком мала; однако я не считаю это требованием. В будущем Flexbox (css-tricks.com/snippets/css /a-guide-to-flexbox) сделает подобные задачи намного проще и гибче. - person Jason; 26.06.2014
comment
Спасибо, Джейкс, к сожалению, ваш метод не позволяет равномерно распределять ячейки внутри ячеек, расстояние между первой и последней буквами каждого пункта меню и их соответствующими границами неравномерно, я подготовил снимок экрана, чтобы лучше проиллюстрировать это s22.postimg.org/5iddovvz5/rsz_21untitled.png. @Jason, спасибо, я просмотрел страницу трюков CSS, прежде чем публиковать здесь, но не смог заставить ее работать. - person ; 26.06.2014

arrow_upward
0
arrow_downward

Немного покопался и нашел этот ответ @Rob Lowe на этой странице как сделать меню ul li css с переменным расстоянием между элементами, очень близко к вашему методу @Jayx, так что еще раз спасибо.

nav {
width:960px;
display:table;
background:rgba(0,0,0,.2);
border-collapse:collapse;
margin:0;
padding:0;
}

nav ul {
display:table-row-group;
list-style:none;
margin:0;
padding:0;
}

nav li {
display:table-cell;
border-right:1px solid rgba(255,255,255,.2);
vertical-align:middle;
}

nav li a {
display:block;
padding:12px 15px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}
person Community    schedule 26.06.2014