如何使导航栏项 CSS 居中答案

【问题标题】：How to center navigation bar items CSS如何使导航栏项 CSS 居中
【发布时间】：2014-05-03 18:13:51
【问题描述】：

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

我的问题是导航栏<li> 无法居中。我尝试了无数在互联网上找到的东西，甚至下载了一些模板进行拼接。没有运气。我确定我只是遗漏了一些东西，但我希望<li>'s 在导航栏中间轻拍，但我尝试过的所有东西都会使它们稍微偏离，将它们浮动到离开，或使它们无法正确调整大小。

这是我的 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;
}

空选择器是我无法弄清楚的地方。

谁能帮我解决这个问题？

【问题讨论】：

标签： html css center navbar

【解决方案1】：

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

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

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

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

显然这是一个简单的功能性答案 - 您需要添加样式来调整 li 和 a 元素的呈现。这段代码所做的只是删除默认项目符号并将li 元素居中。

【讨论】：

感谢您的回答！我以前试过这个，但肯定有另一个属性与之冲突。不过还有一件事：<li> 之间有空格，这里：imgur.com/O2k3E6X 有什么办法可以解决这个问题吗？我正计划设置边界，因此它们需要彼此相邻。
尝试将margin: 0 和padding: 0 添加到.nav ul li。通常在这些情况下，我喜欢重置 li 容器，使其没有自己的属性（例如，没有宽度或高度或填充等），然后让 a 样式处理视觉方面（所以添加你的边框和填充等到.nav ul li a 而不是.nav ul li 定义）。
嗯.. 将margin:0 和padding:0 放在任何元素上似乎都不起作用...编辑：这是小提琴：jsfiddle.net/3e8st
@user2779909 如果您可以在 JSFiddle 中重新创建该问题，我相信我可以解决它！不过，这可能是一个空白问题。尝试删除 li 元素之间的换行符（所以它应该像 <li><a href="example.html">Example Link</a></li><li><a href="#">Example 2</a></li> 一样，lis 之间没有空格或换行符）
如果确实是空白导致了间距，而不是上述方法，请在.nav ul 上设置font-size: 0，然后在.nav ul li 或.nav ul li a 上显式定义font-size。

【解决方案2】：

总会有

text-align: center;

http://jsfiddle.net/M4Q5h/

然后是：

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

http://jsfiddle.net/gnM5f/

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

【讨论】：

【解决方案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

【讨论】：

我不太明白你在说什么宽度......如果我不应该添加宽度（或高度），因为它很笨重，我该如何指定宽度？我会改用填充吗？
@user2779909 我已将其删除，因为它让您感到困惑。我想说的是，如果您为列表元素指定宽度，那么在添加新列表元素时需要在 CSS 中进一步编辑。
我明白了。感谢您的澄清！

【解决方案4】：

添加这个

nav {
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    font-family: consolas;
    align-items: center;
}
nav a {
    text-decoration: none;
    padding: 20px;
    text-align: center;
    float: center;
    color: white;
    margin-left: auto;
    margin-right: auto;
}

<nav align="center">
        <a href="#">Home</a>
        <a href="#">Videos</a>
        <a href="#">Resources</a>
        <a href="#">Projects</a>
        <a href="#">About Us</a>
    </nav>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。