html - li项不会按原样显示

我正在尝试创建一个简单的导航栏，父容器是相对位置的，子容器是绝对的，但是所有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>

最佳答案

我删除了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>

正如其他人提到的，您绝对应该花些时间来理解相对定位和绝对定位之间的差异。

关于html - li项不会按原样显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53226842/