導航欄未正確排列

Question

我正在開發一個使用HTML，CSS和JS的Web項目。現在，我的導航欄的兩個選項卡未正確對齊。我怎樣才能解決這個問題？

這裏是我的CSS和HTML：

ul { 
 
    text-align: left; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    width:900px; 
 
} 
 
ul li { 
 
    font: bold 12px/18px tahoma; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: orange; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
    border:black 1px; 
 
} 
 
ul li:hover { 
 
    background: yellow; 
 
    color: yellow; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: orange; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { background: yellow; } 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#new_div{ 
 
    display:-webkit-box; 
 
    -webkit-box-orient:horizontal; 
 
}

<nav id="navmenu"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About Us</a> 
 
     <ul id="nan"><span></span> 
 
     <li><a href="#">About 1</a></li> 
 
     <li><a href="#">About 2</a></li> 
 
     <li><a href="#">About 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Certifications</a></li> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Foods</a> 
 
     <ul id="nan"><span></span> 
 
     <li><a href="#">Indian</a></li> 
 
     <li><a href="#">Chinese</a></li> 
 
     <li><a href="#">Japanese</a></li> 
 
     <li><a href="#">Italian</a></li> 
 
     <li><a href="#">Thai</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Beverages</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    <li><a href="#">Deserts</a></li> 
 
    <li><a href="#">Promotions</a></li> 
 
    <li><a href="#">Gift Vo.</a></li> 
 
    </ul> 
 
</nav>

Answer 1

你所能做的僅僅是簡單地增加display:inline;一些墊襯，對於一個例子：

ul { 
    text-align: left; 
    display: inline; //modification 
    padding: 15px 4px 17px 0; //modification 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    width:900px; 
} 

這是JSFiddle

Answer 2

我想你的意思是導航「促銷」和「禮品Vo」不在同一行; 由於您設置了「ul」寬度「900px」，因此您可以更改寬度或「ul li」填充以放下所有導航;