給予水平排列的按鈕固定的位置在一個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，％等，具體取決於您的用戶界面以及您希望他們如何查看。

.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; 
 
}

<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>

或者，您也可以進行絕對定位，它包裝的按鈕

.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; 
 
}

<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>