如何设置一行最后一个元素的样式？

Question

我有一个水平列表：

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

和造型：

ol {
    list-style-type: none;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: green;
    margin-right: 50px;
}

问题是一行中最后一个元素的 margin-right 为 50px。根据设备或浏览器的宽度，列表的宽度会有所不同，元素会换行到第二行。我遇到的问题是，元素在距离右侧 50px 时会换行，但我希望它在距离左侧 0px 时换行，这意味着我想对最后一个元素进行不同的样式设置。

li:last-row-element {
    margin-left: 0;
}

CSS（也许是 Flexbox）可以实现这样的事情吗？

我知道媒体查询，但我不想用太多，所以我想知道这里是否有其他解决方案可用！

jsFiddle

Answer 1

li:last-child {
    margin-right: 0;
}

Answer 2

Is something like this possible with CSS (maybe with Flexbox)?

是的，使用 flexbox 布局，您可以将 ol 元素的 display 设置为 flex，然后添加 justify-content: space-between for even spacing between the elements and flex-wrap: wrap 以便元素换行。

Example Here

ol {
    list-style-type: none;
    border: 1px solid black;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

li {
    width: 70px;
    height: 70px;
    background-color: green;
}

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

当然，你也可以去掉最后一个元素的外边距：

Example Here

li:last-of-type {
    margin-right: 0;
}

您也可以使用 :not() pseudo-class 来防止首先在元素上添加边距：

Example Here

li:not(:last-of-type) {
    margin-right: 50px;
}

Answer 3

你能在 HTML 中添加包装器吗？

如果是，则给ol设置一个负的右边距来补偿li中的右边距

div {
    border: 1px solid black;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: -50px;
}

li {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: green;
    margin-right: 50px;
}

<div>
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
</div>

Answer 4

最简单的方法是不使用 margin-right，而是像这样使用 margin-left（支持 IE 7+）：

ol {
    list-style-type: none;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: green;
}

li+li {
    margin-left: 50px;
}

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

或者，您可以在所有 li 上使用 margin-left，并在 first-child 上将 margin-left 重置为 0。li{margin-left:50px}li:first-child{margin-left:0}这也一直支持到 IE 7。

如果您可以使用较新的浏览器 (IE 9+)，那么您也可以使用以下浏览器：

ol {
    list-style-type: none;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: green;
    margin-right: 50px;
}
li:last-of-type {
    margin-right: 0;
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

如何设置一行最后一个元素的样式？

How can I style the last element of a row?

html

css

html-lists