将导航栏项目居中，同时保持背景颜色的全宽

Question

我是CSS新手并在我的页面上使用导航栏，但是我不能将条的所有项目居中，同时保持条的全宽。我错过了什么吗？

D=4

ul {
				list-style-type: none;
				text-transform: uppercase;
				text-align: center;
				background-color: #333;
				overflow: hidden;
				width: 100%;
				z-index: 1;
			}
			
			.naviMenu ul li {
				letter-spacing: 0.05em;
				color: white;
				float: left;
				padding: 14px 16px;
			}
			
			.naviMenu ul li a {
				color: white;
				text-decoration: none;
			}
			
			.naviMenu ul li:hover {
				background-color: #111;
			}

截图

谢谢。

Answer 1

您的标记有点破碎，缺少结束标记和div而不是链接。但你正在做的事情是相当直接的 - 你只需稍微调整一下。 标记：

<div class="naviMenu">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

主要问题是你目前在li元素上留下的浮动。 CSS：

.naviMenu ul {
  width: 100%; /* make it full width */
  background: #333;
  text-align: center; /* align it center */
  list-style: none;
}
.naviMenu ul li {
  display: inline-block; /* inline-block respects align center. allows padding */
  letter-spacing: 0.05em;
  padding: 14px 16px;
}
.naviMenu ul li a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

Codepen：http://codepen.io/anon/pen/ygLZXK

Answer 2

你走了。

＆＃13;

＆＃13;

<div class="naviMenu">
  <ul>
    <li>
      <div id="homePage">Home</div>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li>Text</li>
    <li><a href="photo.html">Photo</a>
    </li>
    <li><a href="special.html">Special Project</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;