Question

请查看下面的代码，此处为link to JSBin。

＆＃13;

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider:first-child {
  padding-left: 20px;
}

.slider:last-child {
  padding-right: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

＆＃13;

正如你所看到的那样，滑块中的第一个孩子有一个左边的填充物，为什么我不会对最右边的孩子产生相同的效果，因为它存在CSS规则？感谢

Answer 1

尝试使用：

A-D-H
A-E-I
B-F
C-G

您的代码希望第一个.element:first-child { padding-left: 20px; } .element:last-child { padding-right: 20px; } - 元素包含.slider，而最后padding-left:20px; - 元素包含.slider。

您需要将子选择器添加到子元素，而不是父元素。

Answer 2

只需添加first-child＆amp; last-child的{{1}}规则不在父div中.element。检查下面更新的代码段。

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider .element:first-child {
  padding-left: 20px;
}

.slider .element:last-child {
  padding-right: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

Answer 3

使用.slider＆gt; div：css中的last-child

.slider {
  display: flex;
  overflow-x: auto;
}

.element {
  width: 20%;
  height: 80px;
  background: yellow;
  flex: 0 0 auto;
}

.element+.element {
  margin-left: 10px;
}

.slider:first-child {
  padding-left: 20px;
}

.slider > div:last-child {
  padding-right: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</body>

</html>

Answer 4

我假设你期待一个保证金，因为你的黄色方框都没有填充。只有从第二个方框到最后一个方框的所有黄色方框都有左边距：10px;因为你提到了

.element+.element
{margin-left: 10px;
}

因此，如果您想在第一个框的左侧和最后一个框的右侧有白色边距，那么您必须像这样给它。

.element:first-of-type {
    margin-left:10px;
}
.element:last-of-type {
    margin-right:10px;
}

为什么最后一个孩子没有使用此代码填充权限？

4 个答案: