एचटीएमएल चेकबॉक्स चौड़ाई

Question

मैं किसी भी JavaScript का उपयोग नहीं कर सकते हैं और सिर्फ सीएसएस में एक जवाब चाहते हैं, तो possbile है।

<label for="autologin">Remember Me</label> 
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
<div class="clear"></div> 

निम्नलिखित सीएसएस के साथ

:: मैं एक के रूप में निम्नलिखित चेक बॉक्स है

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
} 

.clear { 
    clear: both; 
} 

क्या सीएसएस मैं चेक-बॉक्स को जोड़ सकते हैं इसके बारे में बाएं हाथ की ओर प्रदर्शित करने के लिए अपने 200px चौड़ाई? मुझे फ्लोट्स (विशेष रूप से लंबवत संरेखण) के साथ एक कठिन समय है लेकिन मैंने सुना है कि यह सही अभ्यास है।

संपादित करें: ठीक है तो बहुत से लोग सही इनपुट को फ़्लोट नहीं करने का सुझाव दे रहे हैं। यदि ऐसा है तो मैं भी फ्लोट का उपयोग नहीं कर सकता और केवल लेबल की चौड़ाई निर्धारित कर सकता हूं और प्रत्येक पंक्ति के बाद
रख सकता हूं। क्या यह स्वीकार्य अभ्यास होगा या क्या मैं बस यहां फ्लोट का उपयोग कर याद कर रहा हूं?

Answer 1

इस कोशिश, यहाँ डेमो link

label { 
    float:left; 
    margin: 5px 0px; 
} 

input { 
    // float right; 
    margin: 5px 0px; 
    width: 200px; 

} 

.clear { 
    clear: both; 
} 

Answer 2

इसके लिए एक तालिका ठीक है, क्योंकि आपके पास (उपयोगकर्ता द्वारा आपूर्ति) टैब्यूलर डेटा है। यह आपके लंबवत संरेखण के मुद्दों को भी हल करेगा।

दुर्भाग्यवश आप इसकी चौड़ाई के बाईं ओर स्थित चेकबॉक्स नहीं डाल सकते हैं। व्यक्तिगत रूप से, मैं निर्दिष्ट किए बिना स्टाइलिंग input से बचने की सलाह दूंगा। हालांकि, अगर आप एचटीएमएल 5 इनपुट प्रकार का एक बहुत का उपयोग इस तरह के रूप email, number, url आदि तो आप यह सब input एक तरह से शैली के लिए उपयोगी है, तो [type=radio] और [type=checkbox]

Answer 3

के लिए width:auto का उपयोग 20px पसंद करने के लिए इसकी चौड़ाई सेट मिल सकता है, जो समस्या को हल करता है। 200px होने की आवश्यकता नहीं है?

Answer 4

'इसे अपनी चौड़ाई के बाईं ओर ले जाएं' - इसे अपनी चौड़ाई निर्धारित करने दें और फिर यदि आपको इसकी आवश्यकता हो तो दाईं ओर पैडिंग जोड़ें। लेकिन आपके डिजाइन से निर्णय लेना, आप नहीं करते हैं।

input[type=checkbox] { width: auto }

Answer 5

आप नाव विशेषता का उपयोग कर रहे हैं, तो इसका मतलब है, आप प्रपत्र कंटेनर में एक चौड़ाई प्रदान करने के लिए है।

Answer 6

आपको अपने input कक्षा घोषणा में float: right; और width: 200px; को हटा देना चाहिए। और मैं दूसरे कॉलम को संरेखित करने के लिए सभी लेबल (यानी 200px) के लिए चौड़ाई निर्धारित करता हूं।

label { 
    float: left; 
    margin: 5px 0px; 
    width: 200px; 
} 

input { 
    /*float: left;*/ /* This will also work. */ 
    margin: 5px 0px; 
} 

.clear { 
    clear: both; 
} 

jsFiddle Example देखें।

Answer 7

मुझे लगता है कि आपके चेकबॉक्स को इस तरह का केंद्र होने का कारण है क्योंकि आपने इनपुट width:200px इनपुट सेट किया है, इसलिए आपको केवल अपने आईडीबॉक्स (autologin) द्वारा width:auto को अपने चेकबॉक्स में जोड़ना है। इसके अलावा आपको अपने चेक बॉक्स के लिए एक डिवी कंटेनर बनाना होगा।

<label for="autologin">Remember Me</label> 
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div> 
<div class="clear"></div> 

और यहाँ सीएसएस है:: यहाँ HTML है

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
    border:solid 1px; 
} 
#autologin 
{ 
width:auto; 
float:left; 
} 
#check 
{ 
float:right; 
width:200px; 
border:solid 1px; 
} 

.clear { 
    clear: both; 
} 

आशा इस मदद :)

Answer 8

आप कर सकते हैं है चेकबॉक्स की दिशा को संरेखित या परिवर्तित नहीं करें, क्योंकि इसमें कोई अनुलग्नक नहीं है, यह सिर्फ एक बॉक्स है।

आदेश में यह एक div में रख और div इस शैली देना बस किया जाना:

.checkDIV 
{ 
    text-align:left; 
} 

उदाहरण:

<div align="center" class="checkDIV"> 
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
</div>