सवाल एचटीएमएल / सीएसएस में रेडियो / चेकबॉक्स संरेखण


टेक्स्ट के साथ सही ढंग से रेडियो बटन / चेकबॉक्स को संरेखित करने का सबसे साफ तरीका क्या है? एकमात्र विश्वसनीय समाधान जो मैं अब तक उपयोग कर रहा हूं वह तालिका आधारित है:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

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


76
2017-12-28 17:40


मूल


आपको "एचटीएमएल में" का अर्थ स्पष्ट करने के लिए अपना प्रश्न संपादित करना चाहिए। मैं जावा के लिए आपके प्रश्न का उत्तर देने जा रहा था ... - Richard T
मुझे आशा है कि @ रिचर्ड टी जावास्क्रिप्ट का मतलब है - QueueHammer
... या स्विंग .... - devios1
मैंने कुछ सुझावों को चित्रित करने के लिए एक JSFIddle स्थापित किया है: jsfiddle.net/casebash/XNJxT/906 - Casebash
"ठीक से संरेखित करें तुम्हारा क्या मतलब है? सही तरीके से गठबंधन के रूप में क्या मायने रखता है? - Raedwald


जवाब:


मुझे लगता है कि मैंने आखिरकार समस्या हल कर ली है। एक सामान्य रूप से अनुशंसित समाधान लंबवत-संरेखण का उपयोग करना है: मध्य:

<input type="radio" style="vertical-align: middle"> Label

हालांकि, समस्या यह है कि यह अभी भी दृश्यमान misalignments पैदा करता है भले ही इसे सैद्धांतिक रूप से काम करना चाहिए। सीएसएस 2 विनिर्देश कहता है कि:

लंबवत-संरेखण: मध्य: मूल बॉक्स के आधार रेखा के साथ बॉक्स के ऊर्ध्वाधर मध्य बिंदु को संरेखित करें और माता-पिता की आधा x-ऊंचाई।

तो यह सही केंद्र में होना चाहिए (एक्स-ऊंचाई चरित्र x की ऊंचाई है)। हालांकि, समस्या यह है कि तथ्य ब्राउज़र के कारण आमतौर पर रेडियो बटन और चेकबॉक्स में कुछ यादृच्छिक असमान मार्जिन जोड़ते हैं। फ़ायरबग का उपयोग कर फ़ायरफ़ॉक्स में उदाहरण के लिए कोई भी जांच सकता है, कि फ़ायरफ़ॉक्स में डिफ़ॉल्ट चेकबॉक्स मार्जिन है 3px 3px 0px 5px। मुझे यकीन नहीं है कि यह कहां से आता है, लेकिन अन्य ब्राउज़रों के समान मार्जिन भी दिखते हैं। तो एक परिपूर्ण संरेखण प्राप्त करने के लिए, इन मार्जिन से छुटकारा पाने की जरूरत है:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

यह अभी भी दिलचस्प है कि तालिका आधारित समाधान में मार्जिन किसी भी तरह खाया जाता है और सबकुछ अच्छी तरह से संरेखित होता है।


116
2018-05-20 21:55



वास्तव में अच्छा जवाब - अच्छी तरह से शोध किया, और यह काम करता है। जितना अधिक मैं सीएसएस को देखता हूं उतना अधिक स्थानीय मार्जिन और पैडिंग सेटिंग्स कुंजी लगती है। धन्यवाद! - penderi
इसके लिए कुछ अच्छा सीएसएस, इसलिए आपको प्रत्येक बटन और बॉक्स को स्टाइल करने की ज़रूरत नहीं है - इनपुट [टाइप = "रेडियो"], इनपुट [टाइप = "चेकबॉक्स"] {लंबवत-संरेखण: मध्य; मार्जिन: 0 पीएक्स; } - perilandmishap
एफवाईआई, 0 के बाद पीएक्स अनावश्यक है। जब सीएसएस मान 0 होता है, तो इकाई कोई फर्क नहीं पड़ता, इसलिए margin:0 पर्याप्त होगा - jedmao
बीटीडब्ल्यू, मैं इसे काम करने के लिए नहीं मिल सकता :( jsfiddle.net/gNVsC - jedmao
जांचना याद रखें vertical-align एक ही पंक्ति में अन्य तत्वों (उदाहरण के लिए: <label>) इस समाधान का उपयोग करते समय। - Diogo Kollross


फ़ायरफ़ॉक्स और ओपेरा में निम्नलिखित कार्य (क्षमा करें, इस समय मेरे पास अन्य ब्राउज़रों तक पहुंच नहीं है):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

सीएसएस:

.form-field * {
    vertical-align: middle;
}

31
2017-10-28 15:02



मैं समझ नहीं पा रहा हूं कि आपका जवाब क्यों स्वीकार नहीं किया गया था, यह सभी प्रमुख ब्राउज़रों के लिए सबसे आसान कामकाज है (18. अप्रैल 2005 तक) - Chris
कृपया ध्यान दें कि VERTICAL-ALIGN के प्रभाव देखने के लिए आपके दस्तावेज़ का DOCTYPE STRICT होना चाहिए।
मुझे लगता है कि इसका जवाब उत्तर के रूप में स्वीकार नहीं किया गया था क्योंकि, जैसा कि चुना गया उत्तर कहता है, कुछ ब्राउज़र असममित मार्जिन मान जोड़ते हैं, जो इस दृष्टिकोण को काम करने से रोकते हैं। - DaveyDaveDave


मुझे ऐसा करने का सबसे अच्छा और आसान तरीका मिला है क्योंकि यह आपको लेबल, divs या जो कुछ भी जोड़ने की आवश्यकता नहीं है।

input { vertical-align: middle; margin-top: -1px;}


13
2017-12-28 18:07



यह है मार्जिन टॉप: -1px; वह अतिरिक्त सॉस है जो मेरा वोट प्राप्त करता है। मेरे पास एक बटन के अंदर एक रेडियो है जिसका उपयोग मैं एक बटन के रूप में कर रहा हूं। रेडियो शैली के लिए केवल लंबवत-संरेखण डालने से रेडियो केवल अवधि के नीचे पार हो जाता है। स्पैन शैली में लंबवत-संरेखण को शीर्ष पर बटन छोड़ देता है। केवल मार्जिन-टॉप का कोई प्रभाव नहीं पड़ता है। लेकिन उन्हें एक साथ रखो और देखा - gordon
-1 पीएक्स क्या करता है? - Casebash
-1। यह एक बुरा विचार है, आप रेडियो तत्व को स्थानांतरित कर रहे हैं जिसके कारण यह आसपास के तत्वों के साथ नहीं बढ़ता है। पक्षों के अन्य तत्वों के साथ एक के बाद कई रेडियो इनपुट के साथ इसे आज़माएं। - codenamezero


मैं इसके लिए टेबल का उपयोग नहीं करता। सीएसएस आसानी से ऐसा कर सकता है।

मैं ऐसा कुछ करूंगा:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

नोट: मैंने साफ़फिक्स क्लास का उपयोग किया है: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

6
2017-07-08 22:34



प्रतिक्रिया के लिए धन्यवाद, लेकिन मुझे डर है कि यह संरेखण समस्या को हल नहीं करता है। मैं और भी स्पष्ट हो सकता था। मेरा उद्देश्य अपने लेबल के साथ चेकबॉक्स / रेडियो बटन को लंबवत रूप से संरेखित करना है। - Jan Zich
आप इसे मेरे कोड से कर सकते हैं। लेबल पर मार्जिन के साथ खेलें, और यदि आप चाहें तो इनपुट इनपुट में भी इसे जोड़ सकते हैं। तो लेबल {मार्जिन: 10 पीएक्स 0 पीएक्स 0 पीएक्स 10 पीएक्स; बाईंओर तैरना; } लेबल को 10 पिक्सेल नीचे दबाएगा। - Keith Donegan
आप ऐसा कर सकते हैं, लेकिन मूल प्रश्न में से एक बिंदु रेडियो बटन / चेकबॉक्स के आकार के बारे में कुछ भी नहीं मानना ​​था। सबसे अधिक संभावना है कि मेरा सवाल बहुत आशावादी था। - Jan Zich


यह एक हैक का एक सा है लेकिन यह सीएसएस सभी ब्राउज़रों में तालिकाओं का उपयोग करने के समान ही काम करता है (क्रोम के अलावा)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

सुनिश्चित करें कि आप काम करने के लिए अपने रेडियो के साथ लेबल का उपयोग करें। अर्थात।

<option> <label>My Radio</label>

4
2018-01-09 13:07



मीडिया की बात ने मुझे मोबाइल उपकरणों के साथ बहुत मदद की। धन्यवाद! - Sven van Zoelen


यदि आपका लेबल लंबा है और चौड़ाई और डिस्प्ले सेट करने वाली एकाधिक पंक्तियों पर जाता है: इनलाइन-ब्लॉक मदद करेगा।

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>

3
2017-10-21 23:38





मैंने इनपुट के लिए लेबल को मेल खाने वाली ऊंचाई को देने के लिए सबसे अच्छा फिक्स पाया। कम से कम इसने फ़ायरफ़ॉक्स और आईई में असंगतताओं के साथ मेरी समस्या को ठीक किया।

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>

2
2018-04-19 19:20



मिलान की ऊंचाई मेरे रेडियो तय की। चेकबॉक्स नहीं, लेकिन हमारी साइट.css के रूप में चिंतित नहीं है काफी जटिल है। - SushiGuy