[英]Centering Navigation ul li
我似乎無法使主導航欄居中對齊li元素。 當瀏覽器低於768px時,我才遇到問題。 我試過在#nav ul上進行display:inline-block,然后將文本對齊無濟於事。 這是網站: 網站
這是有問題的CSS:
/* Main Navigation */
#topmenu {float: left; height: auto; text-align: center; margin: -10px auto -10px 10px; display: block; width: 96%;}
#nav {float: left; border-left: none; margin: 10px auto 0px; text-align: center; display: block; width: 100%;}
#nav li {float: left; margin-right: auto; border-right: none; width: auto;}
#nav li a:link, #nav li a:active, #nav li a:visited {display: block;text-decoration: none; line-height: 20px; outline: medium none; font-size: 19px; letter-spacing: -0.05em; float: left; padding: 6px 9px 8px; text-align: center; width: auto;}
span.descmenu {display: none;}
display:inline-block
和text-align: center
技術在這里有效,但是您需要確保在較小的屏幕上ul( #nav
)沒有浮動並且沒有設置寬度。
@media screen and (max-width: 767px) {
#nav {
float: none; /* Changed from float: left*/
border-left: none;
margin: 10px auto 0px;
/* text-align: center; NOT NEEDED */
display: inline-block; /* Changed from display: block */
/*width: 100%; Remove */
}
}
這將使子標題位於導航欄中
#nav {
text-align: center;
}
看一下css,它看起來像個float:left或padding / margin可能會覆蓋您要樣式化的li。
應用這些屬性/值
#nav {
text-align: center; /*add*/
}
#nav li {
display: inline-block; /*add*/
text-align: left; /*add*/
float: none; /*change left to none on max-width: 767px */
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.