html - li 项将不会按应有的方式显示

Question

我正在尝试创建一个简单的导航栏，父容器是相对位置的，子容器是绝对的，但是所有的 li 元素只是相互堆叠成一堆。

body {
	margin: 0;
	padding: 0;
	background-color: #eee;
}


.navbarMenu {
	width: 100%;
	background-color:#fff;
	position: relative;
}
.navbarMenu li {
	list-style: none;
	text-align: center;
	position: absolute;
	display: inline-block;
	right: 5px;
}

<ul class="navbarMenu">
  <li><a href="#">Display</a></li>
  <li><a href="#">Float</a></li>
  <li><a href="#">flexbox</a></li>
  <li><a href="#">Home</a></li>
</ul>

Answer 1

我删除了 absolute 定位并将 right 替换为 margin-left。这适用于元素相对于彼此的边距，我认为这是您想要的结果:

https://codepen.io/anon/pen/aQZZVd

body {
	margin: 0;
	padding: 0;
	background-color: #eee;
}

.navbarMenu {
	width: 100%;
	background-color:#fff;
	position: relative;
}
.navbarMenu li {
	list-style: none;
	text-align: center;
	display: inline-block;
	margin-left: 5px;
}

<ul class="navbarMenu">
  <li><a href="#">Display</a></li>
  <li><a href="#">Float</a></li>
  <li><a href="#">flexbox</a></li>
  <li><a href="#">Home</a></li>
</ul>

正如其他人所提到的，您绝对应该花时间了解相对定位和绝对定位之间的区别。