定位菜单项内嵌所有其他项目

我在这里主要导航上现在预订按钮的工作： http://www.rubitours.com/定位菜单项内嵌所有其他项目

基本上所有的其他导航项目有微妙。有些你可以看到，有些是非破坏性的空间。这使他们都能排队。由于它们具有透明背景，因此无关紧要。

我不想在Book Now按钮上添加一个字幕，如果我留下一个空白空间，它会在Book Now这个单词下创建一个可见的绿色区域。我们希望按钮看起来像现在一样，但要与其他导航项目（主页，关于等等）保持一致，并将下面的空间留下红色。

我已经尝试过使用负顶边距（不做任何事）和底边距，只是将整个导航栏下方的红色向下推。

任何人都可以帮助我正确定位这个项目？

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

来源

2015-10-13 MattM

我没有在你的HTML中看到'menu_wrapper' id，问题可能是它需要'menu_border_wrapper'吗？ – cocoa

这是在网站上，只是包括一堆来自标题的其他代码，所以我没有添加它。以这种方式来与WordPress的主题。现在在上面的代码中。不是问题，页面上出现负顶部边距，但不会移动导航项。 – MattM

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

来源

2015-10-14 12:56:42

谢谢，这工作完美！ – MattM

试试这个：

li.book_btn { vertical-align: middle; }

注：vertical-align属性效果很好，当元素有display: inline-block，其中li中的元素已经从y中获得我们的其他CSS规则。

来源

2015-10-13 18:45:14 jaredloson

定位菜单项内嵌所有其他项目

回答

相关问题