Меню на всю ширину.

[Светлана Г.]

Здравствуйте!

Есть задача сверстать такое меню для адаптивной верстки:

 

 

Вся задача в том, чтобы крайние пункты были прижаты к своему краю, т. е. не имели бы отступов.

Я сделала табличной версткой, но не получилось.

[DivMan]

рассчитать всё и прижать.

 

Я в последних вёрстках , перешёл чисто на inline-block 

Edited November 12, 2014 by DivMan

[Светлана Г.]

рассчитать всё и прижать.

 

Я в последних вёрстках , перешёл чисто на inline-block 

А как рассчитать под все возможные разрешения? Это нереально.

Думала, что поможет обнуление отступов у ссылок - не помогло: так какой-то свой расчет идет.

Edited November 12, 2014 by Светлана Г.

[DivMan]

Сразу под все разрешения никак, какая ширина и высота меню? Какая ширина пунктов меню?

[Светлана Г.]

Сразу под все разрешения никак, какая ширина и высота меню? Какая ширина пунктов меню?

Высота 52px; Ширина пунктов у всех разная. Между ними стоят разделители - вертикальные палочки. По ним видно, что отступы одинаковые. Ширина меню на экранах 1680px - 1340px, меньше - 960px.

[mrnobody]

http://jsbin.com/facibo/2/edit?html,output

 

Кроссбраузерно не сделал, для этого почитайте http://css-live.ru/articles-css/progressive-flexbox-horizontal-justify.html

Edited November 12, 2014 by mrnobody

[Светлана Г.]

http://jsbin.com/facibo/2/edit?html,output

 

Кроссбраузерно не сделал, для этого почитайте http://css-live.ru/articles-css/progressive-flexbox-horizontal-justify.html

Спасибо большое! Попробую Ваш вариант. А зачем нужно это правило?

 

.main-menu:after {

  content: " ";

  display: inline-block;

  width: 100%;

}

Edited November 12, 2014 by Светлана Г.

[npofopr]

Вот тут вроде написано, зачем это надо http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

А табличной почему не получилось? 

[Светлана Г.]

С таблицей не получается прижать к краям первый и последний элементы. Паддинги убираю, но все расно получается так:

[Светлана Г.]

Похоже проблема была в обнулении паддингов: они неправильно применялись.

<nav id="top">                <ul class="nav-menu">                    <li class="sub-nav-menu"><a href="index.html" class="level_1">Услуги и цены</a>                            <ul>                                <li><a href="#">Хирургия</a></li>                                <li><a href="#">Терапия</a></li>                                <li><a href="#">Ортопедия</a></li>                                <li><a href="#">Пародонтология</a></li>                                <li><a href="#">Имплантология</a></li>                            </ul>                    </li>                    <li class="sub-nav-menu"><a href="about_us.html" class="level_1">Специалисты</a></li>                    <li class="sub-nav-menu"><a href="#" class="level_1">Новости</a></li>                    <li class="sub-nav-menu"><a href="#" class="level_1">Галерея</a></li>                    <li class="sub-nav-menu"><a href="#" class="level_1">О нас</a>                            <ul>                                <li><a href="#">Наши специалисты</a></li>                                <li><a href="#">Вакансии</a></li>                                <li><a href="#">Отзывы</a></li>                                <li><a href="#">Лицензия</a></li>                            </ul>                    </li>                    <li class="sub-nav-menu"><a href="contacts.html" class="level_1">Контакты</a></li>                </ul>            </nav>

Как правильно обратиться к ссылке первого и последнего li верхнего уровня?

Так:

#top li.sub-nav-menu:first-child a.level_1{

padding-left:0;

}

#top li.sub-nav-menu:last-child a.level_1{

padding-right:0;

}

Edited November 13, 2014 by Светлана Г.

[Светлана Г.]

С обнулением отступов разобралась. Но первый и последний пункты все равно не выровнены по краям.

[npofopr]

text-align: left;

text-align: right; собственно.