Wie kann ich dem Text, der in der zweiten Zeile beginnt, den richtigen Einzug geben?

Question

Dies ist, was ich bin immer:

ich nur padding Raum zwischen dem Eingang und dem Etikett und auch in der zweiten Zeile werden soll. Ich versuche, die zweite Zeile zu füllen.

Unten ist mein Code:

<div class="test"> 
     <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> <label for="2question1">Very long text which is wrapped on the next line</label><br> 
     <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> 
     <label for="2question2">Merknaam 2</label><br> 
     <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> <label for="2question3">Merknaam 3</label><br> 
     <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> <label for="2question4">Merknaam 4</label><br> 
    </div> 


    .test { 
     width:200px; 
    } 

    .test label { 
     display: inline-block; 
     padding-left: 1em; 
     text-indent: -1em; 
    } 

Answer 1

Ok, das gar nicht so einfach war. Der Schlüssel fügte dem übergeordneten Container display: inline-block; hinzu. Versuchen Sie folgendes:

.test { 
 
    display: inline-block; 
 
    width:200px; 
 
    padding-left: 15px; 
 
} 
 

 
.test input[type="checkbox"] { 
 
    display: inline-block; 
 
    margin-left: -15px; 
 
} 
 
.test label { 
 
    display: inline; 
 
    text-indent: 1em; 
 
    margin-left: -1.3em; 
 
    padding-left: 1em; 
 
}

<div class="test"> 
 
     <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> <label for="2question1">Very long text which is wrapped on the next line Very long text which is wrapped on the next line</label><br> 
 
     <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> 
 
     <label for="2question2">Merknaam 2</label><br> 
 
     <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> <label for="2question3">Merknaam 3</label><br> 
 
     <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> <label for="2question4">Merknaam 4</label><br> 
 
    </div>

Sie einige Anpassungen vornehmen können zur .test{padding-left} und .test input{margin-left} das gewünschte Ergebnis zu erhalten.

Answer 2

Gen Parcellano - Sehen Sie, was ist das Ergebnis, das ich jetzt bekomme. enter image description here

Der Text wird nicht in der zweiten Zeile ausgerichtet.