Question

我试图为我的按钮添加边距，但它会使最后一个按钮跳到一行。我想我知道这里发生了什么，但我不确定如何解决它。这是我的，我该怎么办？

.button {
  width: calc(100% / 3);
  height: max-content;
  background: white;
  -webkit-box-shadow: 0 8px 6px 10px black;
  -moz-box-shadow: 0 8px 6px 10px black;
  box-shadow: 0 8px 6px -1px grey;
  margin: auto;
  margin-top: 10px;
  float: left;
  margin: 0px;
  font-family: sans-serif;
  font-weight: 100;
  text-align: center;
  padding-top: 10px;
}

<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>

Answer 1

当一个按钮跟随另一个按钮时，您可以使用.button + .button规则添加左边距。像这样，例如：

＆＃13;

.button {
    width: calc(80% / 3);
    height: max-content;
    background: white;
    -webkit-box-shadow: 0 8px 6px 10px black;
    -moz-box-shadow: 0 8px 6px 10px black;
    box-shadow: 0 8px 6px -1px grey;
    margin: auto;
    margin-top: 10px;
    float: left;
    margin: 0px;
    font-family: sans-serif;
    font-weight: 100;
    text-align: center;
    padding-top: 10px;
}

.button + .button {
    margin-left: calc(10%);
}

＆＃13;

<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>

＆＃13;

这里，三个按钮被分配80％的父包含宽度，剩下的20％在第二个和第三个按钮之间平均分配。

Answer 2

＆＃13;

a {
  margin:12px;
}

＆＃13;

<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>

＆＃13;

如何在按钮之间放置空格？

2 个答案: