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

CSS可能是这样的（可能是Flexbox）吗？

是的，使用flexbox布局，您可以将display元素的ol设置为flex，然后添加justify-content: space-between以获得元素和{{之间的均匀间距3}}以便元素包装。

flex-wrap: wrap

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

您还可以使用Example Here来阻止首先在元素上添加边距：

:not() pseudo-class

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

Answer 2

您可以在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 3

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

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>

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

4 个答案: