0

Необходимо поднять border-right после "КОНТАКТЫ", чтобы он выглядел корректно, то есть сам бордер был посередине, а не ниже.

<div id="topMenu">
     <div class="firstTopMenuItem">ГЛАВНАЯ</div>
     <div class="topMenuItem">ЗАПРОС</div>
     <div class="topMenuItem">ДОСТАВКА И ОПЛАТА</div>
     <div class="topMenuItem">О НАС</div>
     <div class="lastTopMenuItem">КОНТАКТЫ</div>
</div>

#topMenu {
    height: 80px;
    margin: 0 auto;
    background-color: #fff;
    width: 980px;
    min-width: 980px;
    font-family: Tahoma;
    font-size: 15px;
    color: #445566;
}

.firstTopMenuItem {
    display: inline-block;
    border-right: 1px solid #777777;
    margin-left: 15px;
    margin-top: 30px;
    padding-right: 10px;
    text-decoration: underline;
}

.topMenuItem {
    display: inline-block;
    border-right: 1px solid #777777;
    padding-right: 15px;
    padding-left: 10px;
    text-decoration: underline;
}

.lastTopMenuItem {
    display: inline-block;
    padding-left: 10px;
    padding-right: 100px;
    height: 70px;
    border-right: 1px solid #777777;
    text-decoration: underline;
}

Скриншот: http://clip2net.com/clip/m0/752af-clip-4kb.png?nocache=1

1 ответ 1

1

Если используете display: inline-block - http://habrahabr.ru/post/161581/

http://jsfiddle.net/hgajv1qg/

HTML:

<div id="topMenu">
     <div class="topMenuItem">ГЛАВНАЯ</div>
     <div class="topMenuItem">ЗАПРОС</div>
     <div class="topMenuItem">ДОСТАВКА И ОПЛАТА</div>
     <div class="topMenuItem">О НАС</div>
     <div class="topMenuItem">КОНТАКТЫ</div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
}

#topMenu {
    height: 80px;
    margin: 0 auto;
    background-color: #fff;
    width: 980px;
    min-width: 980px;
    font-family: Tahoma;
    font-size: 15px;
    color: #445566;
}
.topMenuItem {
    display: inline-block;
    vertical-align: middle;
    border-right: 1px solid #777777;
    padding-right: 15px;
    padding-left: 10px;
    text-decoration: underline;
    margin-top: 5px;
}
.topMenuItem:first-child{
    margin-left: 15px;    
    padding-right: 10px;
}
.topMenuItem:last-child{
    padding-left: 10px;
    padding-right: 100px;
}
.topMenuItem:last-child:before{
    content: '';    
    height: 70px; 
    display: inline-block;
    vertical-align: middle;
}

Для меню лучше использовать ul li.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.