Question

如何在不更改html中的内容的情况下正确对齐最后四个li项（例如添加ul，id或类）？

ul li,
ul li a {
    display: block;
    margin: 5px;
}

ul li:nth-child(-n+4) {
    float: left;
}

ul li:nth-last-child(-n+4) {
    float: right;
}

<ul>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Page 4</a></li>
  <li><a href="#">Page 5</a></li>
  <li><a href="#">Page 6</a></li>
  <li><a href="#">Page 7</a></li>
  <li><a href="#">Page 8</a></li>
</ul>

Answer 1

在display: flex上设置<ul>，并将第4个元素的边距定义为auto：

＆＃13;

ul {
  display: flex;
}

ul li,
ul li a {
    display: block;
    margin: 5px;
    white-space: nowrap;
}

ul li:nth-child(4) {
    margin-right: auto;
}

＆＃13;

<ul>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Page 4</a></li>
  <li><a href="#">Page 5</a></li>
  <li><a href="#">Page 6</a></li>
  <li><a href="#">Page 7</a></li>
  <li><a href="#">Page 8</a></li>
</ul>

＆＃13;

float：right反转项

1 个答案: