将菜单项与所有其他项内联答案

【问题标题】：Positioning Menu item inline with all other items将菜单项与所有其他项内联
【发布时间】：2016-01-11 15:14:00
【问题描述】：

我正在处理主导航中的“立即预订”按钮： 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;
}

【问题讨论】：

我在您的 HTML 中没有看到 menu_wrapper id，问题可能是它需要是 menu_border_wrapper？
它在网站上，只是包含了标题中的一堆其他代码，所以我没有添加它。以这种方式使用 Wordpress 主题。现在在上面的代码中。不是问题，负上边距出现在页面上，但不会向上移动导航项。

标签： css wordpress navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个：

li.book_btn { vertical-align: middle; }

注意：当元素具有 display: inline-block 时，vertical-align 属性可以很好地工作，而导航中的 li 元素已经从您的其他 CSS 规则中获得。

【讨论】：