HTML / CSS में रेडियो / चेकबॉक्स संरेखण


79

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

<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>

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


आपको अपने प्रश्न को "HTML में" स्पष्ट करने के लिए संपादित करना चाहिए। मैं जावा के लिए आपके प्रश्न का उत्तर देने जा रहा था ...
रिचर्ड टी

3
मुझे आशा है कि @ रिचर्ड टी का मतलब था जावास्क्रिप्ट
कतारueमेर

1
मैंने कुछ सुझावों को दर्शाने के लिए एक JSFIddle की स्थापना की: jsfiddle.net/casebash/XNJxT/906
Casebash

"ठीक से संरेखित करें ओ क्या मतलब है? क्या ठीक से संरेखित के रूप में गिना जाता है?
राएदावल

आप प्रतिशत में संरेखित कर सकते हैं: खुद के लिए मैं उपयोग करता हूं: ऊर्ध्वाधर-संरेखण: -15%; इनपुट टैग पर
PhilMaGeo

जवाबों:


121

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

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

हालाँकि, समस्या यह है कि यह अभी भी दिखाई देने वाले मिथ्याकरण पैदा करता है, भले ही यह सैद्धांतिक रूप से काम करना चाहिए। CSS2 विनिर्देश कहता है कि:

वर्टिकल-अलाइन: मिडिल: पेरेंट बॉक्स के बेसलाइन के साथ बॉक्स के वर्टिकल मिडपॉइंट को संरेखित करें और पैरेंट की आधी x ऊंचाई।

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

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

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


4
वास्तव में अच्छा जवाब - अच्छी तरह से शोध किया, और यह काम करता है। जितना अधिक मैं सीएसएस को देखता हूं उतना अधिक स्थानीय मार्जिन और पैडिंग सेटिंग्स कुंजी लगती हैं। धन्यवाद!
पेंडि

18.Apr.2010 तक यह समाधान फ़ायरफ़ॉक्स 3.6.3 में जीत के लिए काम नहीं करता है
क्रिस

5
इसके लिए कुछ अच्छे सीएसएस, इसलिए आपको हर बटन और बॉक्स को स्टाइल करने की ज़रूरत नहीं है - इनपुट [टाइप = "रेडियो"], इनपुट [टाइप = "चेकबॉक्स"] {वर्टिकल-अलाइन: मध्य; मार्जिन: 0px; }
पेरिंडलमिश

4
FYI करें, 0 के बाद px बेमानी है। जब सीएसएस मान 0 होता है, तो इकाई मायने नहीं रखती है, इसलिए margin:0पर्याप्त होगा।
jedmao

2
इस समाधान का उपयोग करते समय vertical-alignएक ही लाइन (उदाहरण:) में अन्य तत्वों की जांच करना याद रखें <label>
डिओगो कोल्लॉस

31

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

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

सीएसएस:

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

मुझे समझ नहीं आया कि आपका उत्तर क्यों स्वीकार नहीं किया गया, यह सभी प्रमुख ब्राउज़रों के लिए सबसे सरल काम है (18.Apr.2010 के अनुसार)
क्रिस

7
कृपया ध्यान दें कि VERTICAL-ALIGN के प्रभावों को देखने के लिए आपके दस्तावेज़ का DOCTYPE STRICT होना चाहिए।

4
मुझे लगता है कि इस कारण को उत्तर के रूप में स्वीकार नहीं किया गया, क्योंकि जैसा कि उत्तर चुना गया था, कुछ ब्राउज़र असममित मार्जिन मान जोड़ते हैं, जो इस दृष्टिकोण को काम करने से रोकते हैं।
डेविडेवडेव

13

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

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


यह मार्जिन-टॉप: -1 पीएक्स है; वह अतिरिक्त चटनी है जिसे मेरा वोट मिलता है। मेरे पास एक स्पैन के अंदर एक रेडियो है जो मैं एक बटन के रूप में उपयोग कर रहा हूं। रेडियो शैली के लिए केवल ऊर्ध्वाधर-संरेखित करना रेडियो को स्पैन के नीचे से पार करता है। स्पैन में वर्टिकल-एलाइन डालने से बटन सबसे ऊपर रहता है। केवल मार्जिन-टॉप का कोई प्रभाव नहीं है। लेकिन उन्हें एक साथ रखा और आवाज की
गॉर्डोन

-1। यह एक बुरा विचार है, आप रेडियो तत्व को स्थानांतरित कर रहे हैं जिसके कारण यह अन्य आसपास के तत्वों के साथ लाइन नहीं कर सकता है। जाओ इसे कई रेडियो इनपुट के साथ एक के बाद एक करके अन्य तत्वों के साथ पक्षों पर।
codenamezero

6

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

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

   <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 */

प्रतिक्रिया के लिए धन्यवाद, लेकिन मुझे डर है कि यह संरेखण समस्या को हल नहीं करता है। मैं और भी स्पष्ट हो सकता था। मेरा उद्देश्य उनके लेबल के साथ चेकबॉक्स / रेडियो बटन को लंबवत रूप से संरेखित करना है।
Jan Zich

आप मेरे कोड के साथ ऐसा कर सकते हैं। लेबल पर मार्जिन के साथ खेलें, और यदि आप चाहें तो आप इसे इनपुट तत्व में भी जोड़ सकते हैं। तो लेबल {मार्जिन: 10px 0px 0px 10px; बाईंओर तैरना; } 10 पिक्सल नीचे लेबल धक्का होगा।
कीथ डोनगन

3
आप ऐसा कर सकते हैं, लेकिन मूल प्रश्न में एक बिंदु रेडियो बटन / चेकबॉक्स के आकार के बारे में कुछ भी ग्रहण नहीं करना था। सबसे अधिक संभावना है कि मेरा प्रश्न बहुत आशावादी था।
Jan Zich

4

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

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>

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

3

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

.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>

2

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

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

निम्नलिखित कोड काम करना चाहिए :)

सादर,


<style type = "text / css">
इनपुट [प्रकार = चेकबॉक्स] {
    मार्जिन-नीचे: 4px;
    ऊर्ध्वाधर-संरेखित करें: मध्य;
}

लेबल {
    ऊर्ध्वाधर-संरेखित करें: मध्य;
}
</ शैली>


<इनपुट आईडी = "चेकबॉक्स 1" प्रकार = "चेकबॉक्स" /> <लेबल के लिए = "चेकबॉक्स 1"> संपत्ति दिखाएं </ लेबल> <br />
<इनपुट आईडी = "चेकबॉक्स 2" प्रकार = "चेकबॉक्स" /> <लेबल के लिए = "चेकबॉक्स 2"> डिटेक्टर दिखाएं </ लेबल> <br />

1

यह एक सरल समाधान है जो मेरे लिए समस्या का हल है:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}

1

इसे लागू करने के कई तरीके हैं:

  1. ASP.NET मानक चेकबॉक्स के लिए:

    .tdInputCheckBox
    { 
    position:relative;
    top:-2px;
    }
    <table>
            <tr>
                <td class="tdInputCheckBox">                  
                    <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                    <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
                </td>
            </tr>
    </table>
    
  2. DevExpress चेकबॉक्स के लिए:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
    
  3. RadioButtonList के लिए:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. आवश्यक फ़ील्ड सत्यापनकर्ताओं के लिए:

    <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
    

1

नीचे मैं गतिशील रूप से एक चेकबॉक्स सम्मिलित करूंगा। शैली को चेकबॉक्स को संरेखित करने के लिए शामिल किया गया है और यह सुनिश्चित करने के लिए सबसे महत्वपूर्ण है कि वर्ड रैप सीधा है। यहां सबसे महत्वपूर्ण बात यह प्रदर्शित होती है: टेबल-सेल; संरेखण के लिए

दृश्य मूल कोड।

'कोड को गतिशील रूप से एक चेकबॉक्स डालें

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'चेकबॉक्स बनाएँ

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'चेकबॉक्स कनेक्ट करें

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'चेकबॉक्स के लिए शैली

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

और HTML आउटपुट

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>


1

@sfjedi

मैंने एक वर्ग बनाया है और सीएसएस मूल्यों को सौंपा है।

.radioA{
   vertical-align: middle;
}

यह काम कर रहा है और आप इसे नीचे दिए गए लिंक में देख सकते हैं। http://jsfiddle.net/gNVsC/ आशा है कि यह उपयोगी था।


-1

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1;
}


यह फ़ायरफ़ॉक्स 58 पर मेरे लिए काम नहीं करता है, क्या यह किसी प्रकार की गैर-मानक सीएसएस है?
कोनराड होफ़नर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.