Question

在下面的代码中，所有li都将应用左边距，包括第一个边距。这会将第一个元素推向右侧。我不希望推送第一个元素，我希望它保持放置，而其他元素添加了边距。我该怎么做？

ul li
{
    position:relative;
    margin-left:10px;
    display:inline-block
}

Answer 1

您可以使用:first-child伪类

＆＃13;

/* added to remove default styles given by browser */
* {
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  border: 1px solid red;
}
ul li:first-child {
  margin: 0;
}

＆＃13;

<ul>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
</ul>

＆＃13;

或者你也可以使用+ Adjacent sibling css选择器检查li是否有下一个兄弟，并给margin

＆＃13;

/* added to remove default styles given by browser */

* {
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}
ul li + li {
  margin-left: 20px;
}

＆＃13;

<ul>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
</ul>

＆＃13;

Answer 2

理想情况下，您需要定位除第一个元素之外的所有元素。这可以使用以下选择器完成：

li:nth-child(n+2)

如何在其他设置中将ul设置中的第一个li元素的边距移除到内联块

2 个答案: