Question

尝试制作图像时间轴界面，我有点卡住了。标记始终位于中心，因此第一个元素的padding-left: 50%工作正常。但是，我还希望最后一个元素有padding-right: 50%，所以我可以一直滚动到最后一个元素的末尾。

这是jsfiddle：https://jsfiddle.net/da3hk2xz/

如您所见，#timeline:last-child未被应用。

var timeline = document.getElementById("timeline");

for (var i = 0; i < 25; i++) {
  var img = document.createElement("img");
  img.src = "http://placehold.it/300x150?text=" + i
  timeline.append(img)
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#timeline {
  width: 100%;
  height: 150px;
  background-color: red;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
}

#timeline:nth-child(1) {
  padding-left: 50%;
}

#timeline:last-child {
  padding-right: 50%;
}

#marker {
  /* http://apps.eky.hk/css-triangle-generator/ */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 17.5px 0 17.5px;
  border-color: #007bff transparent transparent transparent;
  position: absolute;
  bottom: 115px;
  /* 150 - 35 */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#line {
  width: 2px;
  height: 115px;
  /* 150 - 35 */
  background-color: purple;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

<div id="timeline"></div>
<div id="marker-container">
  <div id="marker"></div>
  <div id="line"></div>
</div>

Answer 1

只需更改有问题的选择器，就可以使用以下内容：

#timeline :nth-child(1) {
  padding-left: 50%;
}

#timeline :last-child {
  padding-right: 50%;
}

原因是最后一个短语＆＃34;在选择器中是要应用样式的元素。在你的小提琴中，最后一个短语＆＃34;是#timeline元素本身，因此它正在接收填充。在#timeline和:last-child之间加上一个空格会使:last-child短语成为最后一个，并且因为选择器中的空格意味着＆＃34;任何后代＆＃34;，所以后代将收到填充。

用简单的英语：

#timeline:last-child：父元素的最后一个子元素，也的id为timeline。 #timeline :last-child：id为timeline的元素子元素的最后一个元素。

定位直接后裔也可以作为一种更安全，更有效的解决方案：

#timeline > :nth-child(1)
#timeline > :last-child

CSS很有趣。

Answer 2

经过测试，结果显示

#timeline img:nth-child(1) {
  padding-left: 50%;
}

#timeline img:last-child {
  padding-right: 50%;
}

Answer 3

这是一个很酷的解决方案：

使用pseudo弹性项目，而不是填充。

#timeline::before {
  content: "";
  flex: 0 0 50%;
  background-color: red;
}

#timeline::after {
  content: "";
  flex: 0 0 50%;
  background-color: red;
}

jsFiddle

Answer 4

你去了：

https://jsfiddle.net/da3hk2xz/1/

你的布局使用了一点绝对定位，所以我不得不稍微改变一下。主要是我添加了#right-padding和#timeImgContainer。

padding-right不适用于最后一个孩子

4 个答案:

jsFiddle