Memposisikan item Menu sejajar dengan semua item lainnya

Saya sedang mengerjakan tombol Pesan Sekarang di navigasi utama di sini: http://www.rubitours.com/

Pada dasarnya semua item navigasi lainnya memiliki subtil. Beberapa dapat Anda lihat dan beberapa lainnya merupakan ruang yang tidak dapat dilanggar. Hal ini memungkinkan mereka semua untuk berbaris. Karena mereka memiliki latar belakang transparan, itu tidak masalah.

Saya tidak ingin subjudul pada tombol Pesan Sekarang dan jika saya menyisakan ruang kosong, itu akan membuat area hijau terlihat jelas di bawah kata Pesan Sekarang. Kami ingin tombolnya terlihat seperti sekarang tetapi agar lebih sejajar dengan item navigasi lainnya (Beranda, Tentang, dll.) meninggalkan ruang di bawah dengan warna merah.

Saya telah mencoba ini dengan margin atas negatif (yang tidak menghasilkan apa-apa) dan margin bawah, yang hanya menekan warna merah di bawah seluruh bilah navigasi.

Adakah yang bisa membantu saya memposisikan item ini dengan benar?

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 (tidak berfungsi)

#menu_wrapper div .nav li.book_btn {
    margin-top:-20px;
}

navigation wordpress css
person MattM    schedule 13.10.2015    source sumber
comment
Saya tidak melihat menu_wrapper id di HTML Anda, mungkinkah masalahnya harus menu_border_wrapper?   -  person cocoa    schedule 13.10.2015
comment
Itu ada di situs web, hanya menyertakan banyak kode lain dari header jadi saya belum menambahkannya. Hadir dengan Tema Wordpress seperti itu. Itu ada dalam kode di atas sekarang. Bukan masalah, margin atas negatif muncul di halaman tetapi tidak menaikkan item navigasi.   -  person MattM    schedule 13.10.2015

Jawaban (2)


arrow_upward
1
arrow_downward

Saya menambahkan float: left; ke #menu_wrapper .nav ul li, #menu_wrapper div .nav li dan menghapus -20px dari #menu_wrapper div .nav li.book_btn dan berfungsi persis seperti yang Anda jelaskan.

person FiSH GRAPHICS    schedule 14.10.2015

arrow_upward
0
arrow_downward

Coba ini:

li.book_btn { vertical-align: middle; }

Catatan: properti perataan vertikal berfungsi dengan baik bila elemen memiliki display: inline-block, yang sudah dimiliki elemen li di navigasi dari aturan CSS Anda yang lain.

person jaredloson    schedule 13.10.2015