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

簡單的答案是把一個寬的造型在下面的例子中使用300像素鏈接：

<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每側：

<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">內出現的第一個。