[英]How to move navigation bar to the horizontal center?
我想将以下导航栏移到水平中心,但不知道如何!? 任何想法?
ul {
list-style-type: none;
padding-left: 350px;
padding-top: 30px;
}
li a {
display: block;
color: #ffffff;
padding: 10px 15px 10px 15px;
text-decoration: none;
font-size: 15px;
border-left: 1px solid #FEDD19;
float: left;
}
li a:hover {
color: #000000;
background-color: #FEDD19;
}
#nav ul {
display: inline-block;
list-style-type: none;
}
.ul { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 100%; height: auto; background-color: lightgrey; } .li { background-color: cornflowerblue; padding: 0.5rem; margin: 0.5rem; -webkit-align-self: center; align-self: center; } a .li:hover { color: #000000; background-color: #FEDD19; cursor: pointer; }
<div class="ul"> <a><div class="li">1</div></a> <a><div class="li">2</div></a> <a><div class="li">3</div></a> <a><div class="li">4</div></a> <a><div class="li">5</div></a> </div>
如果您也放置HTML代码,则将更加有用。 但是,如果您希望元素水平居中,请使用margin: auto;
在元素样式上。
将<ul>
包装成固定宽度的div
并应用margin: 0px auto;
到那个div。
body { background-color: black; } #nav { width: 440px; margin: 0px auto; border: 1px solid white; } .clear { clear: both; } ul { list-style-type: none; padding-top: 30px; } li a { display: block; color: #ffffff; padding: 10px 15px 10px 15px; text-decoration: none; font-size: 15px; border-left: 1px solid #FEDD19; float: left; } li a:hover { color: #000000; background-color: #FEDD19; }
<div id="nav"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <div class="clear"></div> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.