Question

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

基本上所有其他导航项目都有一个subtile。有些你可以看到，有些是不间断的空间。这允许他们排队。由于它们具有透明背景，因此无关紧要。

我不想在“立即预订”按钮上显示字幕，如果我留下一个空白区域，则会在“立即预订”字样下方显示一个明显的绿色区域。我们希望按钮看起来像现在一样，但要与其他导航项目（Home，About等）排成一行，将下面的空间留下红色。

我尝试过这个带有负上边距（没有任何效果）和下边距，只是将整个导航条下方的红色按下。

有人可以帮我正确定位这个项目吗？

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

我已将float: left;添加到#menu_wrapper .nav ul li, #menu_wrapper div .nav li并从-20px移除了#menu_wrapper div .nav li.book_btn，它的工作方式与您所描述的完全相同。

Answer 2

试试这个：

li.book_btn { vertical-align: middle; }

注意：当元素具有display: inline-block时，vertical-align属性很有效，导航中的li元素已经来自其他CSS规则。

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

2 个答案: