Позиционирование пункта меню в ряду со всеми остальными пунктами

Я работаю над кнопкой «Забронировать» в главной навигации здесь: http://www.rubitours.com/

В основном все остальные элементы навигации имеют субплитку. Некоторые из них вы можете видеть, а некоторые — неразрывное пространство. Это позволяет им всем выстроиться в очередь. Поскольку у них прозрачный фон, это не имеет значения.

Мне не нужны подзаголовки на кнопке «Забронировать сейчас», и если я оставлю пустое место, под словами «Забронировать» появится заметная зеленая область. Мы хотим, чтобы кнопка выглядела так же, как сейчас, но чтобы она была больше выровнена с другими элементами навигации (Домой, О программе и т. д.), оставляя пространство внизу красным.

Я пробовал это с отрицательным верхним полем (которое ничего не делает) и нижним полем, которое просто опускает красный цвет ниже всей панели навигации.

Может ли кто-нибудь помочь мне правильно расположить этот элемент?

HTML:

 <div id="menu_wrapper">
    <!--Other Header Content -->
    <div id="menu_border_wrapper" style="display: block;">
        <div class="menu-main-menu-container">
            <ul class="nav" id="main_menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item" id="menu-item-27"><a href="http://www.rubitours.com/"><span><strong>Home</strong><span>&nbsp;</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-812"><a href="http://www.rubitours.com/virginia-city-tour/"><span><strong>Virginia City</strong><span>Tours &amp; Desctiption</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-1002"><a href="http://www.rubitours.com/genoa-lake-tahoe-tour/"><span><strong>Genoa Tour</strong><span>via Lake Tahoe, NV</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-1110"><a href="http://www.rubitours.com/reno-nv-sights-lights-jeep-tour/"><span><strong>Sights &amp; Lights</strong><span>Reno City Tour</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-24"><a href="http://www.rubitours.com/about-us/"><span><strong>About Us</strong><span>&nbsp;</span></span></a></li>
       <!--Button in question is below -->
       <li class="book_btn menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-1047"><a href="http://www.rubitours.com/tours/"><span><strong>Book Now</strong></span></a></li>
                <li class="mobile-only menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-1050"><a href="http://www.rubitours.com/?s="><span><strong>Search</strong></span></a></li>
            </ul>
        </div>                      
    </div>
    </div>

CSS (не работает)

#menu_wrapper div .nav li.book_btn {
    margin-top:-20px;
}

navigation wordpress css
person MattM    schedule 13.10.2015    source источник
comment
Я не вижу идентификатор menu_wrapper в вашем HTML, может проблема в том, что он должен быть menu_border_wrapper?   -  person cocoa    schedule 13.10.2015
comment
Он есть на сайте, просто включает в себя кучу другого кода из шапки, поэтому я его не добавлял. Пришел с темой Wordpress таким образом. Теперь он находится в приведенном выше коде. Не проблема, отрицательное верхнее поле появляется на странице, но не перемещает элемент навигации вверх.   -  person MattM    schedule 13.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я добавил float: left; к #menu_wrapper .nav ul li, #menu_wrapper div .nav li и удалил -20px из #menu_wrapper div .nav li.book_btn, и все заработало именно так, как вы описали.

person FiSH GRAPHICS    schedule 14.10.2015

arrow_upward
0
arrow_downward

Попробуй это:

li.book_btn { vertical-align: middle; }

Примечание: свойство vertical-align хорошо работает, когда элементы имеют display: inline-block, которые уже есть у элементов li в навигации из других ваших правил CSS.

person jaredloson    schedule 13.10.2015