Предоставления Горизонтально выравненные Buttons фиксированного положения в пределах Div

Question

У меня есть DIV с двумя кнопками по горизонтали, сосредоточенных в них, как это:

Я хочу кнопки, чтобы иметь одинаковую ширину от нижней части div независимо от # строк текста над ними.

Обычно я хотел бы дать родительский DIV position: relative; и кнопки position: absolute;, однако абсолютное позиционирование в данном случае разрушает их оригинальное выравнивание, заставляя левую полностью опадают страницу:

I не знаю достаточно о позиционировании 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/МЕНЬШЕ:

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