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>

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

Answer 2

我想像在twitters navbar上那样更靠近它们。

最简单的方法是什么？

body {
	margin: 0;
	padding: 0;
	background-color: #eee;
}

.navbarMenu {
	width: 100%;
	background-color:#fff;
	position: relative;
	padding: 10px;
}

.navbarMenu li  {
	list-style: none;
	text-align: center;
	display: inline-block;
	margin-left: 160px;
	padding: 2px;
	
}
a:hover {
	color: firebrick;
}

<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>

li项不会按原样显示

2 个答案: