Question

我的文字导航栏一直向左拉，任何人都可以告诉我，我的代码是否在某处错了？我已经尝试了内联块并删除了浮动，但它仍然无效！

#navigation ul {
list-style: none;
padding: 0;
width:400px;
margin:auto;
display: inline-block;}

#navigation li {
margin: 1em 1em;
font-family: Times New Roman, Times, Calibri, GillSans, sans-serif;
font-style: italic;
display: inline-block;}

#navigation li a {
text-decoration: none;
display: inline-block;
}

#content {
width: 960px;
margin-top: 25px;
text-align:center;
}

#footer {
margin-top:30px;
text-align: center;
font-size: 0.9em;
}

#sub_navigation {
color: #BBB;
text-align:center;
margin-bottom: 25px;
height:55px;
letter-spacing:5px;
}

我的HTML是：

<div id="navigation" class="span-24 last">
        <ul>
<li><a href="about.html">About</a></li>
<li><a href="editorial.html">Editorial</a></li>
<li><a href="portraits.html">Portraits</a></li>

Answer 1

只需移除display:inline-block的{{1}}属性即可将其设为中心：对于项目添加ul

text-align

演示 http://jsfiddle.net/aYVAP/2/

Answer 2

删除显示：inline-block in ---＆gt;

#navigation li a {
 text-decoration: none;
 **display: inline-block;**
}

粘贴： text-align:center;

如何使用CSS居中文本导航栏

2 个答案: