作者:lw65112779 | 来源:互联网 | 2023-05-21 10:08
我需要帮助将导航栏与中心对齐这是我的代码它有什么问题?它不会将菜单与中心对齐.
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
margin: 0;
padding: 0;
float: left;
}
#nav ul li a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #FFF;
text-align: center;
}
1> Josh Crozier..:
一种方法是设定display
的#nav ul
到inline-block
.然后添加text-align: center
到父元素以使子项居中ul
:
这里的例子
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
text-align: center;
}
#nav ul {
margin: 0;
padding: 0;
display: inline-block;
}
或者,您也可以设置display
父元素的#nav
to flex
,然后添加justify-content: center
以水平居中子元素.
这里的例子
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
display: flex;
justify-content: center;
}
Thax完全可以工作.我学会了如何使用它