定位菜單項內嵌所有其他項目

我在這裏主要導航上現在預訂按鈕的工作： 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

定位菜單項內嵌所有其他項目

回答

相關問題