我正在尝试将未排序列表中的列表元素居中(在 div 中)。但是，li 元素并未在 ul 框内居中。
运行以下代码显示 ul 红色框位于视口(viewport)的中心。但是，三个列表项周围的红色框向右移动，而不是在中心。如何使三个列表项出现在ul框的中心？
h1.mainhead {
color: black;
font-weight: 500;
font-size: 2em;
margin-top: 100px;
text-align: center;
}
.navigation {
border: 1px solid red;
text-align: center;
}
.navigation ul {
border: 1px solid red;
display: inline-block;
}
.navigation ul li {
display: inline-block;
color: black;
font-size: 15pt;
font-weight: 200;
margin-left: 10px;
margin-right: 10px;
border: 1px solid red;
width: 100px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<h1 class="mainhead">Page under construction</h1>
</header>
<div class="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>最佳答案
是的。您可以使用重置 css。重置背后的想法是所有元素都有预定义的样式(包含在网络浏览器中)......它们被重置并使它们在所有浏览器中看起来都一样。查找最常用的here .祝你好运:)
关于html - 如何在ul中水平居中对齐li？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36137026/