我的导航栏中存在文本中心问题。我已经尝试了所有我能想到的东西。任何帮助将不胜感激。
这里有我的导航栏html和css代码。我试过使用其他方法进行居中,但仍然卡住了。
HTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }
答案 0 :(得分:2)
Is this what you are looking for?
我删除了额外的div;创建了一个nav
元素;将margin: 0 auto;
放在ul
上;用[{1}}替换了float: left
上的li
,你就拥有了它!
display: inline-block;
<nav id="top_nav">
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
答案 1 :(得分:0)
而不是像我在代码margin: 0 56px 0 0;
中看到的那样只为每个li元素赋予一个边距权限,为什么你不为每个li标签左右分别给出相等的边距?
例如:margin:0 34px 0 34px;
这可能是一个快速的解决方案。
选中 DEMO :
答案 2 :(得分:0)
以下是最简单的答案
<nav>
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
</ul>
</nav>
<强> CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
总之:将“ul”标记设置为:block,然后设置中心文本