CSS: Wie bekomme ich eingewickelte Etiketten zum Ausrichten

Question

Ich habe einige Radio-Buttons, die ich formatiere, um ein wenig hübscher als das Standard-CSS aussehen. Wenn der Text, der mit dem Optionsfeld verknüpft ist, länger ist, wird er unterhalb des Optionsfelds eingefügt, und Sie können einige Textteile nicht sehen. Wie kann ich den Text umbrechen und ausrichten?

CSS:

body { 
    font-family: sans-serif; 
    font-weight: normal; 
    margin: 10px; 
    color: #999; 
    background-color: #eee; 
} 

form { 
    margin: 40px 0; 
} 

div { 
    clear: both; 
    margin: 0 50px; 
} 

label { 
    width: 200px; 
    border-radius: 3px; 
    border: 1px solid #D1D3D4 
} 

/* hide input */ 
input.radio:empty { 
    margin-left: -999px; 
} 

/* style label */ 
input.radio:empty ~ label { 
    position: relative; 
    float: left; 
    line-height: 2.5em; 
    text-indent: 3.25em; 
    margin-top: 2em; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

input.radio:empty ~ label:before { 
    position: absolute; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 2.5em; 
    background: #D1D3D4; 
    border-radius: 3px 0 0 3px; 
} 

/* toggle hover */ 
input.radio:hover:not(:checked) ~ label:before { 
    content:'\2714'; 
    text-indent: .9em; 
    color: #C2C2C2; 
} 

input.radio:hover:not(:checked) ~ label { 
    color: #888; 
} 

/* toggle on */ 
input.radio:checked ~ label:before { 
    content:'\2714'; 
    text-indent: .9em; 
    color: #9CE2AE; 
    background-color: #4DCB6D; 
} 

input.radio:checked ~ label { 
    color: #777; 
} 

/* radio focus */ 
input.radio:focus ~ label:before { 
    box-shadow: 0 0 0 3px #999; 
} 
    line-height: 2.5em; 
    text-indent: 3.25em; 
    margin-top: 1em; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

input.radio:empty ~ label:before { 
    position: absolute; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 2.5em; 
    background: #D1D3D4; 
    border-radius: 3px 0 0 3px; 
} 

/* toggle hover */ 
input.radio:hover:not(:checked) ~ label:before { 
    content:'✓'; 
    text-indent: .9em; 
    color: #C2C2C2; 
} 

input.radio:hover:not(:checked) ~ label { 
    color: #888; 
} 

/* toggle on */ 
input.radio:checked ~ label:before { 
    content:'✓'; 
    text-indent: .9em; 
    color: #80ffff; 
    background-color: #0080c0; 
} 

input.radio:checked ~ label { 
    color: #777; 
} 

/* radio focus */ 
input.radio:focus ~ label:before { 
    box-shadow: 0 0 0 3px #999; 
} 

HTML:

<div> 
    <input type="radio" name="radio" id="radio1" class="radio" checked/> 
    <label for="radio1">First Option</label> 
</div> 

<div> 
    <input type="radio" name="radio" id="radio2" class="radio"/> 
    <label for="radio2">Second Option</label> 
</div> 

<div> 
    <input type="radio" name="radio" id="radio3" class="radio"/> 
    <label for="radio3">Third Option</label> 
</div> 

<div> 
    <input type="radio" name="radio" id="radio4" class="radio"/> 
    <label for="radio4">Fourth Option is longer</label> 
</div> 

Hier ist ein jsfiddle mit meinem CSS und HTML.

Answer 1

Änderung einige css wie

label { 
    border: 1px solid #d1d3d4; 
    border-radius: 3px; 
    display: block; /* add this property */ 
    padding-left: 50px; /* add this property */ 
    width: 200px; 
} 
input.radio:empty ~ label { 
    position: relative; 
    float: left; 
    line-height: 2.5em; 
    /*text-indent: 3.25em; - remove this property*/ 
    margin-top: 2em; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

https://jsfiddle.net/gb8snazq/4/

Answer 2

text-indent entfernen und padding-left verwenden.

body { 
 
\t font-family: sans-serif; 
 
\t font-weight: normal; 
 
\t margin: 10px; 
 
\t color: #999; 
 
\t background-color: #eee; 
 
} 
 

 
form { 
 
\t margin: 40px 0; 
 
} 
 

 
div { 
 
\t clear: both; 
 
\t margin: 0 50px; 
 
} 
 

 
label { 
 
    width: 200px; 
 
    border-radius: 3px; 
 
    border: 1px solid #D1D3D4 
 
} 
 

 
/* hide input */ 
 
input.radio:empty { 
 
\t margin-left: -999px; 
 
} 
 

 
/* style label */ 
 
input.radio:empty ~ label { 
 
\t position: relative; 
 
\t float: left; 
 
\t line-height: 2.5em; 
 
\t padding-left: 3em; 
 
\t margin-top: 2em; 
 
\t cursor: pointer; 
 
\t -webkit-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 
} 
 

 
input.radio:empty ~ label:before { 
 
\t position: absolute; 
 
\t display: block; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t content: ''; 
 
\t width: 2.5em; 
 
\t background: #D1D3D4; 
 
\t border-radius: 3px 0 0 3px; 
 
} 
 

 
/* toggle hover */ 
 
input.radio:hover:not(:checked) ~ label:before { 
 
\t content:'\2714'; 
 
\t text-indent: .9em; 
 
\t color: #C2C2C2; 
 
} 
 

 
input.radio:hover:not(:checked) ~ label { 
 
\t color: #888; 
 
} 
 

 
/* toggle on */ 
 
input.radio:checked ~ label:before { 
 
\t content:'\2714'; 
 
\t text-indent: .9em; 
 
\t color: #9CE2AE; 
 
\t background-color: #4DCB6D; 
 
} 
 

 
input.radio:checked ~ label { 
 
\t color: #777; 
 
} 
 

 
/* radio focus */ 
 
input.radio:focus ~ label:before { 
 
\t box-shadow: 0 0 0 3px #999; 
 
} 
 
\t line-height: 2.5em; 
 
\t text-indent: 3.25em; 
 
\t margin-top: 1em; 
 
\t cursor: pointer; 
 
\t -webkit-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 

 
input.radio:empty ~ label:before { 
 
\t position: absolute; 
 
\t display: block; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t content: ''; 
 
\t width: 2.5em; 
 
\t background: #D1D3D4; 
 
\t border-radius: 3px 0 0 3px; 
 
} 
 

 
/* toggle hover */ 
 
input.radio:hover:not(:checked) ~ label:before { 
 
\t content:'✓'; 
 
\t text-indent: .9em; 
 
\t color: #C2C2C2; 
 
} 
 

 
input.radio:hover:not(:checked) ~ label { 
 
\t color: #888; 
 
} 
 

 
/* toggle on */ 
 
input.radio:checked ~ label:before { 
 
\t content:'✓'; 
 
\t text-indent: .9em; 
 
\t color: #80ffff; 
 
\t background-color: #0080c0; 
 
} 
 

 
input.radio:checked ~ label { 
 
\t color: #777; 
 
} 
 

 
/* radio focus */ 
 
input.radio:focus ~ label:before { 
 
\t box-shadow: 0 0 0 3px #999; 
 
}

<div> 
 
<input type="radio" name="radio" id="radio1" class="radio" checked/> 
 
<label for="radio1">First Option</label> 
 
</div> 
 

 
<div> 
 
<input type="radio" name="radio" id="radio2" class="radio"/> 
 
<label for="radio2">Second Option</label> 
 
</div> 
 

 
<div> \t 
 
<input type="radio" name="radio" id="radio3" class="radio"/> 
 
<label for="radio3">Third Option</label> 
 
</div> 
 

 
<div> \t 
 
<input type="radio" name="radio" id="radio4" class="radio"/> 
 
<label for="radio4">Fourth Option is longer</label> 
 
</div>

Answer 3

body { 
 
font-family: sans-serif; 
 
font-weight: normal; 
 
margin: 10px; 
 
color: #999; 
 
background-color: #eee; 
 
} 
 

 
form { 
 
margin: 40px 0; 
 
} 
 

 
div { 
 
clear: both; 
 
margin: 0 50px; 
 
} 
 

 
label { 
 
    width: 145px; 
 
    border-radius: 3px; 
 
    border: 1px solid #D1D3D4 
 
} 
 

 
/* hide input */ 
 
input.radio:empty { 
 
margin-left: -999px; 
 
} 
 

 
/* style label */ 
 
input.radio:empty ~ label { 
 
position: relative; 
 
float: left; 
 
margin-top: 2em; 
 
cursor: pointer; 
 
-webkit-user-select: none; 
 
-moz-user-select: none; 
 
-ms-user-select: none; 
 
user-select: none; 
 
    padding: 9px 0 9px 55px; 
 
} 
 

 
input.radio:empty ~ label:before { 
 
position: absolute; 
 
display: block; 
 
top: 0; 
 
bottom: 0; 
 
left: 0; 
 
content: ''; 
 
width: 2.5em; 
 
background: #D1D3D4; 
 
border-radius: 3px 0 0 3px; 
 
line-height: 2.5em; 
 
} 
 

 
/* toggle hover */ 
 
input.radio:hover:not(:checked) ~ label:before { 
 
content:'\2714'; 
 
text-indent: .9em; 
 
color: #C2C2C2; 
 
} 
 

 
input.radio:hover:not(:checked) ~ label { 
 
color: #888; 
 
} 
 

 
/* toggle on */ 
 
input.radio:checked ~ label:before { 
 
content:'\2714'; 
 
text-indent: .9em; 
 
color: #9CE2AE; 
 
background-color: #4DCB6D; 
 
} 
 

 
input.radio:checked ~ label { 
 
color: #777; 
 
} 
 

 
/* radio focus */ 
 
input.radio:focus ~ label:before { 
 
box-shadow: 0 0 0 3px #999; 
 
} 
 
line-height: 2.5em; 
 
text-indent: 3.25em; 
 
margin-top: 1em; 
 
cursor: pointer; 
 
-webkit-user-select: none; 
 
-moz-user-select: none; 
 
-ms-user-select: none; 
 
user-select: none; 
 
} 
 

 
input.radio:empty ~ label:before { 
 
position: absolute; 
 
display: block; 
 
top: 0; 
 
bottom: 0; 
 
left: 0; 
 
content: ''; 
 
width: 2.5em; 
 
background: #D1D3D4; 
 
border-radius: 3px 0 0 3px; 
 
} 
 

 
/* toggle hover */ 
 
input.radio:hover:not(:checked) ~ label:before { 
 
content:'✓'; 
 
text-indent: .9em; 
 
color: #C2C2C2; 
 
} 
 

 
input.radio:hover:not(:checked) ~ label { 
 
color: #888; 
 
} 
 

 
/* toggle on */ 
 
input.radio:checked ~ label:before { 
 
content:'✓'; 
 
text-indent: .9em; 
 
color: #80ffff; 
 
background-color: #0080c0; 
 
} 
 

 
input.radio:checked ~ label { 
 
color: #777; 
 
} 
 

 
/* radio focus */ 
 
input.radio:focus ~ label:before { 
 
box-shadow: 0 0 0 3px #999; 
 
}

<div> 
 
<input type="radio" name="radio" id="radio1" class="radio" checked/> 
 
<label for="radio1">First Option</label> 
 
</div> 
 

 
<div> 
 
<input type="radio" name="radio" id="radio2" class="radio"/> 
 
<label for="radio2">Second Option</label> 
 
</div> 
 

 
<div> \t 
 
<input type="radio" name="radio" id="radio3" class="radio"/> 
 
<label for="radio3">Third Option</label> 
 
</div> 
 

 
<div> \t 
 
<input type="radio" name="radio" id="radio4" class="radio"/> 
 
<label for="radio4">Fourth Option is longer</label> 
 
</div>

• Gebrauchte padding statt text-indent
• line-height-:before hinzugefügt nur

https://jsfiddle.net/afelixj/gb8snazq/5/

Answer 4

.input.radio:empty ~ label:before{ 
 
     content: '✓'; 
 
     color: #fff; 
 
} 
 

 
.input.radio:empty ~ label{ 
 
    text-align:center; 
 
}

<!-- You need to add some css -->

Look like this style