Formatierung HTML-Schaltflächen

Question

Ich habe drei likert auf ähnliche Skalen:

<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

jedoch die erste Taste jeder Skala genau untereinander platziert werden möchte für sie einheitlich zu sein.

Irgendwelche einfachen Lösungen?

Answer 1

give ein min-width zu Ihrem 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

einfachste Antwort ist eine Breite Styling auf den Link zu setzen mit 300px in folgendem Beispiel:

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

Diese alle führenden Aussagen zwingen würde, die gleiche Breite zu sein. Ich würde eine Klasse empfehlen, das Hinzufügen und über die CSS zu tun:

//css 
.leftSide{width:300px} 

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

Sie auch die Links aus dem Button-Gruppe ziehen konnte und sie in ihren eigenen divs zu jeder Seite haben:

<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

Sie müssen eine Anzeigeeigenschaft hinzufügen, um die Breite des a-Tags zu ändern.

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

Answer 4

Obwohl @dippas, dass die Klasse nicht kommentiert die akzeptierte Antwort erforderlich war und war, ist die Tatsache, dass seine Lösung, die Breite des letzten <a> jeder Zeile unnötig steigt.

Eine einfache und saubere Art und Weise zu erreichen, was Sie wollen, ist mit:

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

Auf diese Weise der <a> mit der Klasse btn-link, werden Sie nur das erste auswählen, die im Innern der <div class="btn-group"> erscheint.