[英]How to move content in ul to the center HTML + CSS
我無法使此菜單的鏈接居中。 “文本對齊:居中;” 在ul中不起作用,我已經嘗試尋找解決方案至少1個小時了。 我是Web開發的新手,需要任何幫助。
ul { list-style-type: none; background-color: #3A3A3A; text-align: center; margin: 0; padding: 0; overflow: hidden; } li { display: inline; float: left; font-size: 22px } li a { display: block; padding: 20px 20px; text-decoration: none; } li a:hover { color: #00DBFF; }
<div> <ul> <li><a href="login.html"><b>LOGIN</b></a></li> <li><a href="register.html"><b>REGISTER</b></a></li> <li><a href="dam.html"><b>DAM</b></a></li> <li><a href="herr.html"><b>MÄN</b></a></li> <li><a href="exempel.html"><b>EXEMPEL</b></a></li> <li><a href="test.html"><b>TEST</b></a></li> <li><a href="logout.html"><b>LOGOUT</b></a></li> </ul> </div>
ul { list-style-type: none; background-color: #3A3A3A; text-align: center; margin: 0; padding: 0; overflow: hidden; } li { display: inline; float: left; font-size: 22px } li a { display: block; padding: 20px 20px; text-decoration: none; } li a:hover { color: #00DBFF; }
<div> <ul> <li><a href="login.html"><b>LOGIN</b></a> </li> <li><a href="register.html"><b>REGISTER</b></a> </li> <li><a href="dam.html"><b>DAM</b></a> </li> <li><a href="herr.html"><b>MÄN</b></a> </li> <li><a href="exempel.html"><b>EXEMPEL</b></a> </li> <li><a href="test.html"><b>TEST</b></a> </li> <li><a href="logout.html"><b>LOGOUT</b></a> </li> </ul> </div>
如果您想嘗試以下操作: li {text-align: center;}
li {
display: inline;
/*float: left;*/ /* <----- */
font-size: 22px
}
li a {
display: inline-block; /* <----- */
padding: 20px 20px;
text-decoration: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.