如何将导航栏移动到水平居中?
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;
}
How to center a navigation bar with CSS or HTML?
将 <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>
导航栏居中
.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>
我想把下面的导航栏移到水平居中,但是不知道怎么办!?有什么想法吗?
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;
}
How to center a navigation bar with CSS or HTML?
将 <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>
导航栏居中
.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>