我已经审查了类似堆栈溢出的情况，但他们的解决方案对我不起作用。我如何集中这个导航栏，请帮忙。我只是想把它放在中心，这就是全部。我正在努力不要在尝试这样做的时候引入一个bug。我现在已经有一段时间了很难。这是我的 HTML：
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">WordPress +</label>
<a href="#">WordPress</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">Themes and stuff</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Web Design +</label>
<a href="#">Web Design</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Tutorials +</label>
<a href="#">Tutorials</a>
<input type="checkbox" id="drop-3" />
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Anyhelp将不胜感激。
答案 0 :(得分：1)
您已将float: right用于nav ul。我删除了它并添加了
display: flex; justify-content: center;
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
display: flex;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">WordPress +</label>
<a href="#">WordPress</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">Themes and stuff</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Web Design +</label>
<a href="#">Web Design</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Tutorials +</label>
<a href="#">Tutorials</a>
<input type="checkbox" id="drop-3" />
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
答案 1 :(得分：0)
首先，删除float: right并添加display: flex; justify-content: center。
nav ul {
display: flex;
justify-content: center;
padding:0;
margin:0;
list-style: none;
position: relative;
}