2

这是一个 html/css 导航栏我如何将它居中在我的页面的中心我尝试将中心标签放在 html 和 float:center; 在 ul 下，但它不会工作 生病发布我的 html 然后我的 css

HTML

<body>
<ul>
<li><a href="#">&nbsp;</a></li>
</ul>
</body>

CSS

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
4

6 回答 6

2 
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
    padding-left:200px;

}
a:link,a:visited
{

display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

演示在这里

于 2013-03-28T06:47:03.050 回答
1

放入<ul>内部 a<div>并使用它居中align="center"

像这样：

<div align="center">
<ul>
    <li>hhhh</li>
    <li>hhhhh</li>
</ul>
</div>
于 2013-03-28T06:41:21.813 回答
1

您需要添加：

margin: 0 auto;

到 ul 和 a 元素的 css，并删除 float: left; 从里。

在这里看到这个jsfiddle

于 2013-03-28T06:41:33.027 回答
1

既然你给了你a的 awidth: 120px那么为什么不能给你的 ul 相同的属性并使用margin：

width: 120px;
margin: 0 auto;

演示：http: //jsfiddle.net/NYE3y/

于 2013-03-28T06:42:01.483 回答
1

将 text-align: center 添加到 ul 并将 float: left 替换为 display: inline-block

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}

你的 CSS 的其他部分保持不变！

因此，如果您向您的网站添加更多 li，它们都将位于彼此相邻的中心。

<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>

要删除空格：

 <li><a href="#">&nbsp;</a></li><li><a href="#">&nbsp;</a></li>

不要在每行之间按回车。:)

...或者还有另一种解决方案是添加：margin-left:-4px:

   li
    {
display:inline-block; 
margin-left: -4px;
    }
于 2013-03-28T06:53:58.947 回答
0

为 UL 使用包装器并为包装器应用宽度

<div class="menu-wrap">
    <ul>
        <li>Menu A</li>
    </ul>
</div>

CSS：

.menu-wrap {
    margin:0 auto;
    width:500px;
}

你仍然可以使用 float 作为你的 li。请记住始终清除浮动。

于 2013-03-28T07:15:49.047 回答