赋予水平对齐按钮A Div中的固定位置

Question

我有一个div，其中两个按钮水平居中，如下所示：

我希望按钮在div的底部具有相同的宽度，而不管它们上面的文本行数是多少。

通常我会给父div position: relative;和按钮position: absolute;，但是在这种情况下绝对定位会破坏它们的原始对齐方式，导致左边的一个完全脱离页面：

我对CSS定位知之甚少，不知道为什么会这样。

这是我现有的html和css。

HTML：

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3">
        <h4 class="padded-top"> Vegan Vit. D</h4>
        <p> fat soluble vitamin mix</p>
          <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button>
          <button class="button-warning pure-button">Delete</button>
    </div>

CSS / LESS：

.formula-block {
  height: 225px;
  width:  200px;
  border: 3px solid lighten(@dark-grey, 15%);
  box-shadow: 1px 1px @grey;
  margin-bottom: 1.5em;
  margin-right: 1.5em;
  position: relative;
a {
  color: @off-white;
  text-decoration: none;
}
p {
  padding: 0px 5px 0px 5px;
  }
button {
  position: absolute;
  bottom: 0.5em;
  }
}

如何让按钮与底部保持固定距离？任何帮助将不胜感激，谢谢。

Answer 1

您只需要左侧按钮left: 0和右侧按钮right: 0，其中0是您希望它们定位的左侧或右侧位置。 0可以是px值，em，％等，具体取决于您的用户界面以及您希望它们的外观。

＆＃13;

＆＃13;

.formula-block {
  height: 225px;
  width: 200px;
  border: 3px solid lighten(@dark-grey, 15%);
  box-shadow: 1px 1px @grey;
  margin-bottom: 1.5em;
  margin-right: 1.5em;
  position: relative;
}

a {
  color: @off-white;
  text-decoration: none;
}

p {
  padding: 0px 5px 0px 5px;
}

button {
  position: absolute;
  bottom: 0.5em;
}

.button-success {
  left: 0;
}

.button-warning {
  right: 0;
}

＆＃13;

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3">
  <h4 class="padded-top"> Vegan Vit. D</h4>
  <p> fat soluble vitamin mix</p>
  <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button>
  <button class="button-warning pure-button">Delete</button>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以绝对定位一个包含按钮的新元素

＆＃13;

＆＃13;

.formula-block {
  height: 225px;
  width: 200px;
  border: 3px solid lighten(@dark-grey, 15%);
  box-shadow: 1px 1px @grey;
  margin-bottom: 1.5em;
  margin-right: 1.5em;
  position: relative;
}

a {
  color: @off-white;
  text-decoration: none;
}

p {
  padding: 0px 5px 0px 5px;
}

.buttons {
  position: absolute;
  bottom: 0.5em;
  left: 0; right: 0;
  text-align: center;
}

＆＃13;

<div class="formula-block centered" id="587d6b07c89e7613846a3cf3">
  <h4 class="padded-top"> Vegan Vit. D</h4>
  <p> fat soluble vitamin mix</p>
  <div class="buttons">
    <button class="button-success pure-button"><a href="/formula/587d6b07c89e7613846a3cf3">Show</a></button>
    <button class="button-warning pure-button">Delete</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;