Кнопки форматирования HTML

Question

У меня есть три Лайкерта весы аналогичны:

<div class="btn-toolbar" role="toolbar" aria-label="..."> 
<div class="btn-group" role="group" aria-label="..."> 
<a class="btn btn-link disabled" disabled>Not Fearsome</a> 
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button> 
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button> 
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button> 
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button> 
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button> 
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a> 
</div> 
</div> 

CodePen

Однако хотел бы, первая кнопка каждой шкалы, чтобы быть размещены точно друг под другом для них, чтобы быть однородным.

Любые простые решения?

Answer 1

поддавки min-width к вашему a

.btn-link { 
 
    min-width: 130px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-toolbar" role="toolbar" aria-label="..."> 
 
    <div class="btn-group" role="group" aria-label="..."> 
 
    <a class="btn btn-link disabled" disabled>Not Fearsome</a> 
 
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button> 
 
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button> 
 
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button> 
 
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button> 
 
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button> 
 
    <a class="btn btn-link disabled" disabled>Extremely Fearsome</a> 
 

 
    </div> 
 
</div> 
 
<div class="btn-toolbar" role="toolbar" aria-label="..."> 
 
    <div class="btn-group" role="group" aria-label="..."> 
 
    <a class="btn btn-link disabled" disabled>Not Controllable</a> 
 
    <button id="control1" type="button" class="btn btn-default likert-1">1</button> 
 
    <button id="control2" type="button" class="btn btn-default likert-2">2</button> 
 
    <button id="control3" type="button" class="btn btn-default likert-3">3</button> 
 
    <button id="control4" type="button" class="btn btn-default likert-4">4</button> 
 
    <button id="control5" type="button" class="btn btn-default likert-5">5</button> 
 
    <a class="btn btn-link disabled" disabled>Totally Controllable</a> 
 

 
    </div> 
 
</div> 
 
<div class="btn-toolbar" role="toolbar" aria-label="..."> 
 
    <div class="btn-group" role="group" aria-label="..."> 
 
    <a class="btn btn-link disabled" disabled>Not Dangerous</a> 
 
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button> 
 
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button> 
 
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button> 
 
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button> 
 
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button> 
 
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a> 
 

 
    </div> 
 
</div>

Answer 2

Простейшее ответ поставить ширину укладки на ссылку, используя 300px в следующем примере:

<a class="btn btn-link disabled" disabled style="width:300px">Not Fearsome</a> 

Это вынудит все ведущие операторы, чтобы быть такой же ширины. Я хотел бы предложить добавить класс и делать с помощью CSS:

//css 
.leftSide{width:300px} 

<a class="leftSide btn btn-link disabled" disabled>Not Fearsome</a> 

вы также можете вытащить ссылки из кнопок-группы и иметь их с каждой стороны в своей диве:

<div class="btn-toolbar" role="toolbar" aria-label="..."> 
<div class="col-md-2"> 
    <a class="btn btn-link disabled" disabled>Not Fearsome</a> 
</div> 
<div class="col-md-10"> 
<div class="btn-group" role="group" aria-label="..."> 

    <button id="fear1" type="button" class="btn btn-default likert-1">1</button> 
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button> 
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button> 
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button> 
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button> 
</div> 
</div> 
<div class="col-md-2"> 
    <a class="btn btn-link disabled" disabled>Extremely Fearsome</a> 
</div> 
</div> 

Answer 3

Вам нужно добавить свойство отображения, чтобы изменить ширину тега.

.btn-link { 
    display: inline-block; 
    min-width: 110px; 
} 

Answer 4

Несмотря на то, @dippas отметил, что класс был не нужен, и был принят ответ, тот факт, что его решение увеличивает ширину последнего <a> каждой строки излишне.

простой и чистый способ добиться того, что вы хотите использует:

.btn-link:first-child { 
    display:inline-block; 
    width: 150px; 
} 

Таким образом, из <a> с классом btn-link, вы только выбрать первое, что появляется внутри <div class="btn-group">.