Hoe kan ik de breedte van een labeltag bepalen?

De labeltag heeft niet de eigenschap ‘width’, dus hoe kan ik de breedte van een labeltag bepalen?


Antwoord 1, autoriteit 100%

Natuurlijk CSS gebruiken…

label { display: block; width: 100px; }

Het kenmerk widthis verouderd en CSS moet altijd worden gebruikt om dit soort presentatiestijlen te beheren.


Antwoord 2, autoriteit 49%

Het is beter om het inline-blok te gebruiken omdat het de resterende elementen en/of bedieningselementen niet dwingt om in een nieuwe regel te worden getekend.

label {
  width:200px;
  display: inline-block;
}

Antwoord 3, autoriteit 14%

Inline-elementen (zoals SPAN, LABEL, enz.) worden zo weergegeven dat hun hoogte en breedte door de browser worden berekend op basis van hun inhoud. Als je de hoogte en breedte wilt regelen, moet je de blokken van die elementen wijzigen.

display: block;zorgt ervoor dat het element wordt weergegeven als een vol blok (zoals DIV-tags), wat betekent dat er een regeleinde is na het element (het is niet inline). Hoewel je display: inline-blockkunt gebruiken om het probleem van regeleinde op te lossen, werkt deze oplossing niet in IE6 omdat IE6 inline-block niet herkent. Als je wilt dat het compatibel is met meerdere browsers, bekijk dan dit artikel: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html


Antwoord 4, autoriteit 2%

Breedte geven aan Label is niet de juiste manier. u moet één div- of tabelstructuur nemen om dit te beheren. maar toch, als je niet je hele code wilt veranderen, kun je de volgende code gebruiken.

label {
  width:200px;
  float: left;
}

Antwoord 5, autoriteit 2%

Je kunt het zeker op deze manier proberen

.col-form-label{
  display: inline-block;
  width:200px;}

Antwoord 6

label {
  width:200px;
  display: inline-block;
}
OR 
label {
  width:200px;
  display: inline-flex;
}
OR 
label {
  width:200px;
  display: inline-table;
}

Antwoord 7

Je kunt een klassenaam aan alle labels geven, zodat ze allemaal dezelfde breedte kunnen hebben:

.class-name {  width:200px;}

Voorbeeld

.labelname{  width:200px;}

of je kunt eenvoudig de rest van het label geven

label {  width:200px;  display: inline-block;}

Antwoord 8

<style type="text/css">
    .princip{
        height: 190px ;
        width:190px ;
        border:  solid;
    }
    label{
        height: 190px !important;
        width:190px  !important;
        border:  solid;
        display: block;
    }
 </style>
    <div class="princip"  id="princip">
    <input id="rad1" type="radio" name="rad"/>
    <label class="lbl" id="lbl" for="rad1">
        <h1>fdgb</h1>
    <h2>sdfs</h2>
    </label>
    </div>

Other episodes