Indenting multiline labels
I have the following automatically-generated HTML:
开发者_如何学Chttp://jsfiddle.net/BrV8X/
What is the advised way, using CSS, to indent the label so that there's some white space under the radio button?
label {
display: block;
margin-left: 20px;
}
input {
float: left;
margin-left: -20px;
margin-right: 7px;
}
Here's the fiddle: http://jsfiddle.net/hrfmt/ . Play with the values.
EDIT:
If all the browsers you need to support can understand display: inline-block
, use that instead of float
.
label {
position:relative;
padding-left:20px;
display:block;
}
label input[type=radio] {
position:absolute;
top:4px;
left:0px;
}
http://jsfiddle.net/BrV8X/4/
Here's an example of how to do that without resorting to floats. You'll have to do some magic with negative margins with this approach.
input {
display: inline-block;
margin-right: -100px;
/* The 2 below properties are just for "correct" vertical placement of the button. */
margin-top: 5px;
vertical-align: top;
}
label {
display: inline-block;
margin-left: 100px;
margin-right: -100px;
}
div {
/* Just some spacing between the radio buttons. */
margin-bottom: 5px;
}
http://jsfiddle.net/4osbp0mo/2/
精彩评论