Question

我有一些单选按钮，我正在格式化，看起来比标准CSS更漂亮。当与单选按钮关联的文本较长时，它会包裹在单选按钮下方，您无法看到某些文本。如何将文本换行并对齐？

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>

这是一张带有我的CSS和HTML的jsfiddle。

Answer 1

改变一些css，如

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并使用padding-left。

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;
	padding-left: 3em;
	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;
}

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

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

使用padding代替text-indent
line-height仅添加到:before

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Look like this style

CSS：如何使包装标签对齐

4 个答案: