我做了一个导航栏,我试图让它居中以适合所有屏幕,位置绝对,然后使用 left: 50%;然后将其放置在 margin-left: 100px;把它准确地放在我想要的地方。我已经对我的所有按钮都做了这个并且它有效,但是当我尝试在我的导航栏上这样做时,它会将整个栏移动到中间,然后当我移动它时,它不起作用。
html代码:
<div id="navBarTop">
<ul>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
</ul>
</div>
通常的 css 代码:
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
当我试图让它居中时的 css(不起作用):
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
left: 50%;
margin-left: 100px;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
最佳答案
我觉得你太努力了。
#navBarTop {
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
text-align: center;
top: 50px;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family:"Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
<div id="navBarTop">
<ul>
<li><a href="test.html">test</a>
</li>
<li><a href="test.html">test</a>
</li>
<li><a href="test.html">test</a>
</li>
<li><a href="test.html">test</a>
</li>
</ul>
</div>
关于html - 居中导航栏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28950775/