Question

我有一个列表，我希望第一个li与右边对齐，第二个和第四个对齐到中心，第三个对齐到左边。

但是当我使用浮动权利时，第二个li上升到与第一个相同的行。

如何防止第二个元素上升？

Answer 1

您可以使用text-align设置对齐方式。

要选择每个列表项，您可以使用:nth-child选择器。

li { /* or `li:nth-child(2), li:nth-child(4)` */
  text-align: center;
}
li:nth-child(1) { /* or `li:first-child` */
  text-align: right;
}
li:nth-child(3) {
  text-align: left;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

Answer 2

在这种情况下使用text-align menu {}来集中所有li元素，然后:nth-child浮动所需的内容。

*{box-sizing: border-box}
menu{
  width: 100%;
  text-align: center;
  padding: 0
}
menu li{
display: inline-block;
max-width: 20%;
background: #ccc;
padding: 10px 24px;
margin: 10px 4px;
cursor: pointer;
border-radius: 4px;
color: #808080;
}
menu li:first-child{float: right}
menu li:nth-child(3){float: left}

<menu>
  <li>HOME</li>
  <li>WORK</li>
  <li>CONTACT</li>
  <li>INFO</li>
</menu>

将li对齐在右边，中间，左边然后再次居中

2 个答案: