删除最后一个内联元素的右边距

Question

我有一个带有内部div按钮的页脚span。

每个按钮都有margin-right: 20px，.footer元素有padding: 0 13px。

我希望阻止margin-right最右边的按钮，将负margin-right设置为其父级。

我怎样才能使用margin-right？

＆＃13;

＆＃13;

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  width: 120px;
  text-align: right;
  background-color: yellow;
}

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}

＆＃13;

<div class="footer">
  <span class="btn">Btn1</span>
  <span class="btn">Btn2</span>
</div>

＆＃13;

＆＃13;

＆＃13;

我不正在寻找使用last child CSS 伪类的解决方案。

Answer 1

您需要添加.footer的另一个容器子项，并对该元素应用否定margin-right。这种方法也被描述为here：

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  text-align: right;
  background-color: yellow;
  overflow:hidden;
}
.footer > div {
  margin-right:-33px;
  }

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}

<div class="footer">
  <div>
    <span class="btn">Btn1</span>
    <span class="btn">Btn2</span>
  </div>
</div>

请注意，您还需要overflow:hidden;到.footer元素以防止水平滚动条。