Question

我有一个横跨整个页面宽度的导航栏。我还添加了一个jQuery脚本，以便它更改为position：在滚动一段时间后修复，但我不认为这会影响这个问题。

我的问题是我无法将导航栏<li>置于中心位置。我尝试了无数的东西，我在互联网上找到了，甚至下载了一些模板来拼接。没有运气。我确定我只是遗漏了一些东西，但我希望<li>能够在导航栏的中间轻拍，但是我尝试过的任何东西都会让它们略微脱落，漂浮它们在左边，或者使它们没有正确调整大小。

这是我的HTML：

<!doctype html>

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Blah blah blah</h1>

        <!--START NAVBAR-->
        <div class="nav">
            <ul>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
                <li><a>Home</a></li>
            </ul>
        </div>
        <!--STOP NAVBAR-->

        <div class="content">
            <p>
            Lorem ipsum dolor sit amet...
            </p>
            <p>

            Nullam pellentesque nunc luctus...
            </p><p>
            Donec sodales fermentum orci...
            </p><p>
            Ut venenatis tellus ...
            </p><p>
            Nullam quis molestie nunc...

            </p>
        </div>

    </body>

CSS：

body{
background-image:url("woodPatternShadow.png");
background-size:75% auto;
padding:0;
font-family:"Verdana";
}



.nav{
height:40px;
background-color:rgba(0,0,0,0.25);
left:0;
right:0;
box-shadow: inset 0 3px rgba(255, 255, 255, 0.4), inset 0 10px 4px rgba(255, 255, 255, 0.3),inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(28,0,0,0.3);
border:1px solid rgba(0,0,0,0.1);
margin:0;
position:absolute;
}

#fixNav{
position:fixed;
top:0px;
}

.nav ul{
}

.nav ul li{
}

.nav ul li a{
}

.content{
background-color:white;
border-radius:20px;
padding:10px;
width:70%;
margin:100px auto 0;
}

空的选择器是我无法弄明白的地方。

有人可以为我清楚吗？

Answer 1

将ul设置为text-align: center并在display: inline-block元素上设置li。

.nav ul {
   list-style: none;
   text-align: center;
}

.nav ul li {
   display: inline-block;
}

display: inline-block元素被视为内联元素，即使它们在大多数方面都像块元素一样，因此在容器上设置text-align: center会将内联li元素置于其中。

显然，这是一个准确的功能性答案 - 您需要添加样式来调整li和a元素的表示。所有这些代码都是删除默认项目符号并使li元素居中。

Answer 2

始终

text-align: center;

http://jsfiddle.net/M4Q5h/

然后有：

.nav ul li{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

http://jsfiddle.net/gnM5f/

第二种可能是最好的方法，但是如果你想要文本居中，那么第一种可能就好了（编辑：在这种情况下，Ennui的答案更完整）。

Answer 3

将list-style:none和text-align:center应用于.nav课程。

<强> CSS ：

.nav{
    ----
    ----
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}

See demo

如何集中导航栏项目CSS

3 个答案: