HTML/CSS垂直導航欄仍然水平嗎？

我正在嘗試爲手機制作垂直導航欄，但它看起來像CSS不好。有人可以看到最新的錯誤嗎？儘快發佈照片。HTML/CSS垂直導航欄仍然水平嗎？

HTML代碼

#navigation { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
li a { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 8px 16px; 
 
    margin: 0 auto; 
 
} 
 

 
.nav-active { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
li a:hover:not(.active) { 
 
    color: #1b9cc6; 
 
}

<div id="navigation"> 
 
    <ul> 
 
    <li><a class="active" href="#about">ABOUT</a></li> 
 
    <li><a href="#clients">CLIENTS</a></li> 
 
    <li><a href="#services">SERVICES</a></li> 
 
    <li><a href="#work">WORK</a></li> 
 
    <li><a href="#contact">CONTACT</a></li> 
 
    </ul> 
 
</div>

編輯：這裏是IMMAGE。對不起，不裁剪它，但我找不到適合Linux的適當工具。

來源

2017-03-09 BrS

是否要將導航項放在一行（水平）或下面（垂直）？ – Gezzasa

鏈接的大小太大，無法垂直對齊。使用Media Queries或Bootstrap來幫助您進行響應式設計 – Swellar

您能展示更多的CSS嗎？你在這裏展示的東西不足以生成屏幕截圖，所以問題必須與你沒有展示的位相關！ –

男人，你的#navigation需要width的100%。它佔用了屏幕寬度的百分之百。嘗試用更小的值來改變它。

來源

2017-03-09 10:08:53 Yoan

HTML/CSS垂直導航欄仍然水平嗎？

回答

相關問題