html - चेकबॉक्स और उनके लेबल लगातार क्रॉस-ब्राउज़र को संरेखित कैसे करें




css cross-browser (20)

यह मामूली सीएसएस समस्याओं में से एक है जो मुझे लगातार पीड़ा देता है। स्टैक ओवरफ़्लो के आसपास के लोगों को लंबवत रूप से checkboxes और उनके labels लगातार क्रॉस-ब्राउज़र संरेखित करते labels ? जब भी मैं सफारी में उन्हें सही ढंग से संरेखित करता हूं (आमतौर पर vertical-align: baseline का उपयोग कर vertical-align: baseline input पर vertical-align: baseline ), वे फ़ायरफ़ॉक्स और आईई में पूरी तरह बंद हो जाते हैं। फ़ायरफ़ॉक्स में इसे ठीक करें, और सफारी और आईई अनिवार्य रूप से गड़बड़ कर रहे हैं। जब भी मैं एक फॉर्म कोड करता हूं, मैं इस पर समय बर्बाद करता हूं।

यहां मानक कोड है जिसके साथ मैं काम करता हूं:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

मैं आमतौर पर एरिक मेयर के रीसेट का उपयोग करता हूं, इसलिए फॉर्म तत्व अपेक्षाकृत साफ ओवरराइड होते हैं। किसी भी सुझाव या चाल के लिए तत्पर हैं जो आपको पेश करना है!


400+ अपवॉट्स के साथ चुना गया उत्तर क्रोम 28 ओएसएक्स में मेरे लिए काम नहीं करता था, शायद इसलिए कि ओएसएक्स में इसका परीक्षण नहीं किया गया था या 2008 में जो कुछ भी था, उस काम में जवाब दिया गया था।

समय बदल गया है, और नए CSS3 समाधान अब व्यवहार्य हैं। मेरा समाधान कस्टम चेकबॉक्स बनाने के लिए pseudoelements का उपयोग करता है। इसलिए शर्तों (पेशेवर या विपक्ष, हालांकि आप इसे देखते हैं) निम्नानुसार हैं:

  • केवल आधुनिक ब्राउज़रों में काम करता है (एफएफ 3.6 +, आईई 9 +, क्रोम, सफारी)
  • एक कस्टम डिज़ाइन किए गए चेकबॉक्स पर निर्भर करता है, जिसे प्रत्येक ब्राउज़र / ओएस में बिल्कुल वही प्रदान किया जाएगा। यहां मैंने कुछ साधारण रंगों को चुना है, लेकिन आप हमेशा रैखिक ग्रेडियेंट जोड़ सकते हैं और इस तरह इसे अधिक धक्का दे सकते हैं।
  • एक निश्चित फ़ॉन्ट / फ़ॉन्ट आकार के लिए तैयार है, जो बदल गया है, तो आप इसे लंबवत रूप से गठबंधन करने के लिए चेकबॉक्स की स्थिति और आकार को बस बदल देंगे। अगर सही ढंग से tweaked, अंत परिणाम अभी भी सभी ब्राउज़र / ऑपरेटिंग सिस्टम में एक ही के करीब होना चाहिए।
  • कोई ऊर्ध्वाधर संरेखण गुण नहीं, कोई फ्लोट नहीं
  • मेरे उदाहरण में प्रदत्त मार्कअप का उपयोग करना चाहिए, यदि प्रश्न की तरह संरचित किया गया तो यह काम नहीं करेगा, हालांकि, लेआउट अनिवार्य रूप से वही दिखाई देगा। यदि आप चीजों को चारों ओर स्थानांतरित करना चाहते हैं, तो आपको संबंधित सीएसएस को भी स्थानांतरित करना होगा

आपका एचटीएमएल:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

आपका सीएसएस:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

यह समाधान चेकबॉक्स को छुपाता है , और दृश्यमान चेकबॉक्स बनाने के लिए लेबल में स्यूडोलेमेंट जोड़ता है और स्टाइल करता है। चूंकि लेबल छिपे हुए चेकबॉक्स से जुड़ा हुआ है, इनपुट फ़ील्ड अभी भी अपडेट हो जाएगा और मान फॉर्म के साथ सबमिट किया जाएगा।

जेएसफ़िल्ड: http://jsfiddle.net/SgXYY/6/

और यदि आप रुचि रखते हैं, तो यहां रेडियो बटन पर मेरा ध्यान है: http://jsfiddle.net/DtKrV/2/

आशा है कि किसी को यह उपयोगी लगेगा!


अब यह कि सभी आधुनिक ब्राउज़रों में फ्लेक्सबॉक्स समर्थित है, ऐसा कुछ मेरे लिए एक आसान दृष्टिकोण जैसा प्रतीत होता है।

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>


यहां पूर्ण प्रीफ़िक्स्ड संस्करण डेमो है:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}
<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>


कभी-कभी ऊर्ध्वाधर-संरेखण को एक दूसरे के बगल में तत्वों को ठीक से काम करने के लिए दो इनलाइन (अवधि, लेबल, इनपुट, आदि ...) की आवश्यकता होती है। आईई, सफारी, एफएफ और क्रोम में निम्न चेकबॉक्स ठीक से लंबवत केंद्रित हैं, भले ही पाठ का आकार बहुत छोटा या बड़ा हो।

वे सभी एक ही पंक्ति पर एक दूसरे के बगल में तैरते हैं, लेकिन नाइट्रैप का मतलब है कि पूरा लेबल टेक्स्ट हमेशा चेकबॉक्स के बगल में रहता है।

नकारात्मक अर्थ अतिरिक्त अर्थहीन स्पैन टैग है।

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

अब, यदि आपके पास बहुत लंबा लेबल टेक्स्ट था जिसे चेकबॉक्स के नीचे लपेटने के बिना लपेटने की आवश्यकता थी, तो आप लेबल तत्वों पर पैडिंग और नकारात्मक टेक्स्ट इंडेंट का उपयोग करेंगे:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


केवल vertical-align: sub प्रयोग vertical-align: sub , जैसा कि pokrishka पहले ही सुझाया गया है।

Fiddle

HTML कोड:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

सीएसएस कोड:

.checkboxes input {
    vertical-align: sub;
}

ट्वीविंग, परीक्षण, और मार्कअप की विभिन्न शैलियों की कोशिश करने के एक घंटे बाद, मुझे लगता है कि मेरे पास एक सभ्य समाधान हो सकता है। इस विशेष परियोजना के लिए आवश्यकताएं थीं:

  1. इनपुट अपनी लाइन पर होना चाहिए।
  2. चेकबॉक्स इनपुट को सभी ब्राउज़रों में समान रूप से लेबल टेक्स्ट के साथ लंबवत रूप से संरेखित करने की आवश्यकता होती है (यदि समान नहीं है)।
  3. यदि लेबल टेक्स्ट लपेटता है, तो इसे इंडेंट करने की आवश्यकता होती है (इसलिए चेकबॉक्स के नीचे कोई लपेटना नहीं)।

किसी भी स्पष्टीकरण में आने से पहले, मैं आपको कोड दूंगा:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

JSFiddle में कामकाजी उदाहरण यहां दिया गया है।

यह कोड मानता है कि आप एरिक मेयर की रीसेट का उपयोग कर रहे हैं जो फॉर्म इनपुट मार्जिन और पैडिंग को ओवरराइड नहीं करता है (इसलिए इनपुट सीएसएस में मार्जिन और पैडिंग रीसेट डालें)। स्पष्ट रूप से एक जीवंत वातावरण में आप अन्य इनपुट तत्वों का समर्थन करने के लिए शायद घोंसले / ओवरराइडिंग सामान होंगे, लेकिन मैं चीजों को सरल रखना चाहता था।

ध्यान देने योग्य बातें:

  • *overflow घोषणा एक इनलाइन आईई हैक (स्टार-प्रॉपर्टी हैक) है। आईई 6 और 7 दोनों इसे नोटिस करेंगे, लेकिन सफारी और फ़ायरफ़ॉक्स इसे ठीक से अनदेखा कर देगा। मुझे लगता है कि यह वैध सीएसएस हो सकता है, लेकिन आप अभी भी सशर्त टिप्पणियों के साथ बेहतर हैं; बस सादगी के लिए इसका इस्तेमाल किया।
  • सबसे अच्छा मैं बता सकता हूं, ब्राउज़र में लगातार एकमात्र vertical-align कथन vertical-align: bottom । इसे सेट करना और फिर अपेक्षाकृत स्थिति ऊपर की तरफ सफारी, फ़ायरफ़ॉक्स और आईई में केवल एक पिक्सेल या दो विसंगति के साथ व्यवहार किया जाता है।
  • संरेखण के साथ काम करने में बड़ी समस्या यह है कि आईई इनपुट तत्वों के आस-पास रहस्यमय जगह का एक गुच्छा चिपक जाती है। यह पैडिंग या मार्जिन नहीं है, और यह लगातार शापित है। चेकबॉक्स पर चौड़ाई और ऊंचाई निर्धारित करना और फिर overflow: hidden कुछ कारणों से overflow: hidden अतिरिक्त जगह को काटता है और आईई की स्थिति को सफारी और फ़ायरफ़ॉक्स के समान कार्य करने की अनुमति देता है।
  • आपके पाठ आकार के आधार पर, आपको निश्चित रूप से चीजों को सही दिखने के लिए सापेक्ष स्थिति, चौड़ाई, ऊंचाई, और आगे समायोजित करने की आवश्यकता होगी।

मनाइए कि यह किसी और के लिए सहायक हो! मैंने इस सुबह की किसी भी परियोजना पर इस विशिष्ट तकनीक की कोशिश नहीं की है, जिसे मैं आज सुबह काम कर रहा था, इसलिए यदि आप कुछ ऐसा पाते हैं जो लगातार काम करता है तो निश्चित रूप से पाइप करें।


तो मुझे पता है कि इसका जवाब कई बार दिया गया है, लेकिन मुझे लगता है कि मेरे पास पहले से ही उपलब्ध कराए गए लोगों की तुलना में एक और अधिक शानदार समाधान है। और न केवल 1 सुरुचिपूर्ण समाधान, बल्कि आपकी फैंसी को गुदगुदी करने के लिए 2 अलग-अलग समाधान। इसके साथ ही, टिप्पणियों के साथ, आपको जो कुछ भी जानने और देखने की आवश्यकता है, वह 2 जेएस फिडल्स में निहित है।

समाधान # 1 दिए गए ब्राउज़र के मूल "चेकबॉक्स" पर निर्भर करता है, हालांकि मोड़ के साथ ... यह एक div में निहित है जो एक ओवरफ्लो के साथ क्रॉस-ब्राउज़र को स्थानांतरित करना आसान है: 1px विस्तारित चेकबॉक्स से अधिक काटने के लिए छुपा हुआ (ऐसा इसलिए है कि आप एफएफ की बदसूरत सीमाओं को नहीं देख सकते हैं)

सरल एचटीएमएल: (टिप्पणियों के साथ सीएसएस की समीक्षा करने के लिए लिंक का पालन करें, कोड ब्लॉक http://jsfiddle.net/KQghJ/ को संतुष्ट करना है) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

समाधान # 2 एक डीवीवी की सीएसएस स्थिति को टॉगल करने के लिए "चेकबॉक्स टॉगल हैक" का उपयोग करता है, जिसे ब्राउज़र में ठीक से स्थानांतरित किया गया है, और चेकबॉक्स अनचेक और चेक किए गए राज्यों के लिए एक सरल स्प्राइट के साथ सेटअप करें। यह आवश्यक है कि चेकबॉक्स टॉगल हैक के साथ पृष्ठभूमि-स्थिति को समायोजित करना है। यह मेरी राय में, अधिक सुरुचिपूर्ण समाधान है क्योंकि आपके चेकबॉक्स और रेडियो पर अधिक नियंत्रण है, और यह गारंटी दे सकता है कि वे ब्राउज़र पर समान दिखते हैं।

सरल HTML: (टिप्पणियों के साथ सीएसएस की समीक्षा करने के लिए लिंक का पालन करें, कोड ब्लॉक को संतुष्ट करने के लिए है) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

अगर कोई इन तरीकों से असहमत है, तो कृपया मुझे एक टिप्पणी छोड़ दो, मुझे कुछ फीडबैक सुनना अच्छा लगेगा कि दूसरों को इन समाधानों में क्यों नहीं आया है, या यदि उनके पास है, तो मुझे उनके बारे में कोई जवाब क्यों नहीं दिख रहा है? यदि कोई भी इन तरीकों में से किसी एक को विफल करता है, तो यह भी देखना अच्छा लगेगा, लेकिन इन्हें नवीनतम ब्राउज़र में परीक्षण किया गया है और एचटीएमएल / सीएसएस विधियों पर भरोसा किया गया है जो काफी पुराने हैं, और सार्वभौमिक जहां तक ​​मैंने देखा है।


मुझे ऐसा करने में कोई समस्या नहीं है:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

मुझे लगता है कि यह सबसे आसान तरीका है

input {
    position: relative;
    top: 1px;
}

Fiddle


मेरे लिए एकमात्र पूरी तरह से काम करने वाला समाधान है:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

आज क्रोम, फ़ायरफ़ॉक्स, ओपेरा, आईई 7 और 8 में परीक्षण किया गया। उदाहरण: Fiddle


मेरे समाधान का प्रयास करें, मैंने इसे आईई 6, एफएफ 2 और क्रोम में आजमाया और यह सभी तीन ब्राउज़रों में पिक्सेल द्वारा पिक्सेल प्रस्तुत करता है।

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>


मैं आमतौर पर लेबल किए गए चेकबॉक्स को छोड़ देता हूं और फिर अपना "लेबल" एक अलग तत्व बना देता हूं। यह एक दर्द है, लेकिन चेकबॉक्स और उनके लेबल कैसे प्रदर्शित होते हैं (जैसा कि आपने देखा है) के बीच इतना क्रॉस-ब्राउज़र अंतर है कि यह एकमात्र तरीका है जिससे मैं नियंत्रित कर सकता हूं कि सबकुछ कैसा दिखता है।

मैं इसी कारण से Winforms विकास में ऐसा कर रहा हूं। मुझे लगता है कि चेकबॉक्स नियंत्रण के साथ मौलिक समस्या यह है कि यह वास्तव में दो अलग-अलग नियंत्रण है: बॉक्स और लेबल। चेकबॉक्स का उपयोग करके, आप यह तय करने के लिए नियंत्रण के कार्यान्वयनकर्ताओं को छोड़ रहे हैं कि ये दो तत्व एक दूसरे के बगल में कैसे प्रदर्शित होते हैं (और वे हमेशा गलत होते हैं, जहां गलत = आप जो चाहते हैं)।

मुझे उम्मीद है कि किसी के पास आपके प्रश्न का बेहतर उत्तर होगा।


मैंने पूरी तरह से अपने समाधान का परीक्षण नहीं किया है, लेकिन ऐसा लगता है कि यह बहुत अच्छा काम करता है।

मेरा एचटीएमएल बस है:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

मैं फिर ऊंचाई और चौड़ाई दोनों के लिए सभी चेकबॉक्स 24px सेट करता हूं। पाठ को गठबंधन करने के लिए मैं लेबल की line-height भी 24px और vertical-align: top; असाइन करता 24px vertical-align: top; इस तरह:

संपादित करें: आईई परीक्षण के बाद मैंने vertical-align: bottom; जोड़ा vertical-align: bottom; इनपुट के लिए और लेबल के सीएसएस बदल दिया। आपको लगता है कि पैडिंग को हल करने के लिए आपको एक सशर्त आईई सीएसएस केस की आवश्यकता है - लेकिन टेक्स्ट और बॉक्स इनलाइन हैं।

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

अगर किसी को पता चलता है कि यह काम नहीं करता है, तो कृपया मुझे बताएं। यहां यह कार्रवाई में है (क्रोम और आईई में - माफी माँगने के रूप में स्क्रीनशॉट रेटिना पर लिया गया था और आईई के समानांतर का उपयोग कर रहा था):


यदि आप ट्विटर बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप बस <label> पर checkbox क्लास का उपयोग कर सकते हैं:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

यह मेरे लिए अच्छा काम करता है:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>


सीएसएस:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

उपरोक्त कोड आपकी सूची वस्तुओं को तीनकोल्स में रखेगा और बस सूट को बदलने के लिए बदल देगा।


हाँ धन्यवाद! यह भी मुझे हमेशा के लिए पागल चला रहा है।

मेरे विशेष मामले में, यह मेरे लिए काम किया:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

मैं reset.css का उपयोग कर रहा हूं जो कुछ अंतरों को समझा सकता है, लेकिन ऐसा लगता है कि यह मेरे लिए अच्छा काम करता है।


vertical-align: middle प्रयास vertical-align: middle

आपका कोड ऐसा लगता है जैसे यह होना चाहिए:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>


निम्नलिखित ब्राउज़रों में पिक्सेल-परिपूर्ण स्थिरता देता है, यहां तक ​​कि आईई 9:

स्पष्ट होने के बिंदु पर दृष्टिकोण काफी समझदार है:

  1. एक इनपुट और एक लेबल बनाएँ।
  2. उन्हें ब्लॉक के रूप में प्रदर्शित करें, ताकि आप उन्हें पसंद कर सकें।
  3. ऊंचाई और रेखा-ऊंचाई को उसी मान पर सेट करें ताकि यह सुनिश्चित किया जा सके कि वे लंबवत हैं और लंबवत संरेखित हैं।
  4. एम माप के लिए, तत्वों की ऊंचाई की गणना करने के लिए, ब्राउज़र को उन तत्वों के लिए फ़ॉन्ट की ऊंचाई पता होना चाहिए, और इसे स्वयं मापों में सेट नहीं किया जाना चाहिए।

इसका परिणाम वैश्विक रूप से लागू सामान्य नियम में होता है:

input, label {display:block;float:left;height:1em;line-height:1em;}

प्रति आकार, फ़ील्ड या तत्व के रूप में फ़ॉन्ट आकार अनुकूलनीय के साथ।

#myform input, #myform label {font-size:20px;}

मैक, विंडोज़, आईफोन और एंड्रॉइड पर नवीनतम क्रोम, सफारी और फ़ायरफ़ॉक्स में परीक्षण किया गया। और आईई 9।

यह विधि उन सभी इनपुट प्रकारों पर लागू हो सकती है जो टेक्स्ट की एक पंक्ति से अधिक नहीं हैं। सूट के लिए एक प्रकार का नियम लागू करें।


input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>


<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

आपको किसी भी तरह से अपने स्वयं के फ़ील्ड में समूहित रूपों को एक साथ समूहित करना चाहिए, यहां, यह रैपपा बजाता है। सेट इनपुट / लेबल डिस्प्ले: ब्लॉक, इनपुट फ्लोट बाएं, लेबल फ्लोट दाएं, अपनी चौड़ाई सेट करें, बाएं / दाएं मार्जिन के साथ रिक्ति नियंत्रण, तदनुसार लेबल टेक्स्ट को संरेखित करें।

इसलिए

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

आपको शायद क्रॉस-ब्राउज़र / मीडिया समाधान दोनों के लिए सीमा, रूपरेखा और रेखा-ऊंचाई सेट करने की आवश्यकता है।





html-form