Indenting बहु लेबल

Question

मैं निम्नलिखित स्वचालित रूप से बना HTML:

http://jsfiddle.net/BrV8X/

क्या है की सलाह दी जिस तरह से, सीएसएस का उपयोग कर, वहाँ इतना है कि रेडियो बटन के तहत कुछ सफेद स्थान लेबल इंडेंट करने के लिए?

Answer 1

label { 
    display: block; 
    margin-left: 20px; 
} 
input { 
    float: left; 
    margin-left: -20px; 
    margin-right: 7px; 
} 

यहां पहेली है: http://jsfiddle.net/hrfmt/। मूल्यों के साथ खेलो।

संपादित करें:

तो सभी ब्राउज़रों आप समर्थन करने की आवश्यकता को समझ सकता हूँ display: inline-block, उपयोग के बजाय float।

Answer 2

label { 
    position:relative; 
    padding-left:20px; 
    display:block; 
} 

label input[type=radio] { 
    position:absolute; 
    top:4px; 
    left:0px; 
} 

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

Answer 3

यहाँ कैसे करना है तैरता का सहारा के बिना इस बात का एक उदाहरण है। आपको इस दृष्टिकोण के साथ नकारात्मक मार्जिन के साथ कुछ जादू करना होगा।

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/