gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:29:04 24 4
gpt4 key购买 nike

我的文本导航栏一直向左拉,谁能告诉我是不是我的代码哪里有问题?我试过 inline-block 并删除了 float,但它仍然不起作用!

#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>

最佳答案

只需删除 uldisplay:inline-block 属性即可居中:并为元素添加 text-align

#navigation ul {
list-style: none;
padding: 0;
width:400px;
margin:auto;
/*display: inline-block;*/ ---> Remove this
text-align: center; ----> Add this
}

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

关于html - 如何使用 CSS 将文本导航栏居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20219827/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com