Indenting multiline labels

后端 未结 3 1264
孤街浪徒
孤街浪徒 2021-02-07 05:21

I have the following automatically-generated HTML:

http://jsfiddle.net/BrV8X/

What is the advised way, using CSS, to indent the label so that there\'s some white

相关标签:
3条回答
  • 2021-02-07 05:44
    label {
       position:relative;
       padding-left:20px;
       display:block;
    }
    
    label input[type=radio] {
       position:absolute;
       top:4px;
       left:0px;   
    }
    

    http://jsfiddle.net/BrV8X/4/

    0 讨论(0)
  • 2021-02-07 05:56

    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/

    0 讨论(0)
  • 2021-02-07 05:58
    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.

    0 讨论(0)
提交回复
热议问题