Question

如何集中这件事？我尝试了几种方式，但导航。酒吧不完全在网站的中间。

<style>

ul
{
background-color:red;
list-style-type:none;
}

li
{
float:left;
}

a
{
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}

a:link
{
background-color:red;
}
a:hover
{
background-color:white;
}
</style>

<ul>

  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>

</ul>

伙计它有效，导航栏现在正确居中，但文字不是这次。

.......................

填充：0到ul解决了问题。

谢谢你们

Answer 1

试试这个：

删除float:left;并将display:inline-block;添加到li。

将text-align: center; margin:0 auto;和width添加到ul。

更改为：

ul {
    background-color:red;
    list-style-type:none;
    text-align: center;
    margin: 0 auto;
    width:80%;
}
li {
    display: inline-block;
}

<强> JSFiddle Demo

Answer 2

您可以修改CSS，如下所示：

ul {
    background-color:red;
    list-style-type:none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width:80%;
}
li { display: inline-block;}
a {
    display:block;
    text-decoration:none;
    width:80px;
    padding:20px;
    text-align:center;
}
a:link {background-color:red;}
a:hover { background-color:white;}

注意添加了4条重要的行：

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width:80%; - set the desirable width if not 100%

宽度也可以绝对单位指定，例如width:800px;或者，第2行和第3行可以替换为单个语句：margin: 0 auto;

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

希望这会有所帮助。的问候，

如何居中水平导航栏？

2 个答案: