如何使导航栏项 CSS 居中
Posted
技术标签:
【中文标题】如何使导航栏项 CSS 居中【英文标题】：How to center navigation bar items 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;
空选择器是我无法弄清楚的地方。
谁能帮我解决这个问题？
【问题讨论】：
【参考方案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。以上是关于如何使导航栏项 CSS 居中的主要内容，如果未能解决你的问题，请参考以下文章