只是无法将此列表居中...(元素，li)。
怎么了？
我现在已经看了将近半个小时的代码，仍然找不到问题所在。一直在改变一些东西，但仍然是错误的。
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Blog</title>
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Spis Treści
</li>
<li>
Kategorie
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
还有 CSS:
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: 36px;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
text-align: center;
float: left;
padding: 5px;
}
最佳答案
发生这种情况是因为您将 li 标签 float 到左侧，将其删除并在 ul 上添加使用 flexbox，在这种情况下设置所需的宽度我将 100% 和 justify-content: center;所以它可以居中。
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: 36px;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
display:flex;
justify-content:center;
width:100%;
}
.nav > ul li {
text-align: center;
padding: 5px;
}<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Spis Treści
</li>
<li>
Kategorie
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>关于html - 为什么这个无序列表不是居中的？怎么了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44009511/