定位菜单项与所有其他项目内联

Question

我正在处理主导航中的“立即预订”按钮： http://www.rubitours.com/

基本上所有其他导航项都有一个子标题。有些你可以看到，有些是非破坏性的 space。这使他们都可以排队。因为它们有透明背景，所以没关系。

我不想在“立即预订”按钮上添加副标题，如果我留空 space 它会在“立即预订”一词下方形成一个明显的绿色区域。我们希望按钮看起来像现在一样，但要与其他导航项（主页、关于等）更多地排列在一起，使下面的 space 变为红色。

我试过用负的上边距（什么都不做）和下边距，它只是将红色下推到整个导航栏下方。

谁能帮我正确定位这个项目？

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;
}

Answer 1

试试这个：

li.book_btn { vertical-align: middle; }

注意：当元素具有 display: inline-block 时，垂直对齐属性效果很好，导航中的 li 元素已经具有其他 CSS 规则。

Answer 2

我将 float: left; 添加到 #menu_wrapper .nav ul li, #menu_wrapper div .nav li 并从 #menu_wrapper div .nav li.book_btn 中删除了 -20px，它完全按照您的描述工作。

定位菜单项与所有其他项目内联

Positioning Menu item inline with all other items

css

navigation

wordpress