इनपुट के बगल में लेबल संरेखित करें

Question

मेरे पास बहुत ही बुनियादी और ज्ञात परिदृश्य हैं जहां मुझे इनपुट के बगल में लेबल को सही ढंग से संरेखित करने की आवश्यकता है। हालाँकि मुझे नहीं पता कि यह कैसे करना है।

मेरा लक्ष्य यह होगा कि लेबल दाईं ओर इनपुट के बगल में संरेखित हों। यहाँ वांछित परिणाम का चित्र उदाहरण है।

मैंने आपकी सुविधा के लिए एक फिडेल बनाया है और स्पष्ट करने के लिए कि मेरे पास अब क्या है - http://jsfiddle.net/WX58z/

स्निपेट:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Answer 1

एक संभव समाधान:

• लेबल दें display: inline-block;
• उन्हें एक निश्चित चौड़ाई दें
• पाठ को दाईं ओर संरेखित करें

अर्थात्:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle

Comments

यदि कुछ लेबल चेक-बॉक्स या रेडियो बटन हैं तो मैं यह काम कैसे करूँगा? इन तत्वों के लिए लेबल टेक्स्टबॉक्स के रूप में उसी निश्चित चौड़ाई के साथ समाप्त होते हैं जो वांछित नहीं है। क्या लेबल पर एक निश्चित चौड़ाई के बिना ऐसा करने का कोई तरीका है?

— रेबेका मेरिट्ज़

@RebeccaMeritz का मतलब है जब मार्कअप में पहले चेकबॉक्स और उसके बाद लेबल होता है? आप दोनों के लिए एक वर्ग जोड़ सकते हैं, और उन्हें अलग से स्टाइल कर सकते हैं। शायद आपको इसके बारे में एक नया सवाल पूछना चाहिए ।

— bfavaretto

इसे उत्तरदायी कैसे बनाया जाए? और i18n के साथ कैसे सामना करें? मेरा मतलब है कि अलग-अलग भाषाओं में टेक्स्ट लेबल्स की लंबाई अलग-अलग होती है, इसलिए मुझे डर है कि टेक्स्ट के लंबे होने पर निश्चित चौड़ाई भरने से काम नहीं चलता।

— अज़िमुथ

@Azimuth आजकल, आप सीएसएस ग्रिड का उपयोग करना चाह सकते हैं।

— bfavaretto

यह निश्चित चौड़ाई को चिह्नित कर रहा है, यह अधिकतम लेबल चौड़ाई के आधार पर, गतिशील होना चाहिए।

— सम्यक जैन

Answer 2

जबकि यहाँ समाधान व्यावहारिक हैं, मेरे विचार से एक बेहतर समाधान के लिए हाल ही की तकनीक ने बनाया है। सीएसएस ग्रिड लेआउट हमें एक और अधिक सुंदर समाधान की संरचना करने की अनुमति देता है।

नीचे सीएसएस एक 2-कॉलम "सेटिंग्स" संरचना प्रदान करता है, जहां पहले कॉलम में एक सही-संरेखित लेबल होने की उम्मीद है, इसके बाद दूसरे कॉलम में कुछ सामग्री है। दूसरे कॉलम में <div> लपेटकर अधिक जटिल सामग्री प्रस्तुत की जा सकती है।

[एक साइड-नोट के रूप में: मैं प्रत्येक लेबल को जोड़ने वाले ':' को जोड़ने के लिए CSS का उपयोग करता हूं, क्योंकि यह एक शैलीगत शैली है - इसकी प्राथमिकता।]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

Comments

अरे, क्या आप कृपया एक बेला जोड़ सकते हैं?

— स्टेन

हां, मैंने स्निपेट्स का उपयोग करने के लिए उत्तर अपडेट कर दिया है।

— डेविड रदरफोर्ड

कौन से क्रोम संस्करण और प्लेटफ़ॉर्म से आपको समस्या हो रही है?

— डेविड रदरफोर्ड

सर्वोतम उपाय! Chrome 73 में अब ठीक काम करता है।

— फिलिप माइकल्स्की

बहुत बढ़िया! यदि आप ऊपर दिए गए कॉलम की परिभाषा को बदलते हैं grid-template-columns: max-content 1fr;, तो दूसरा कॉलम शेष सभी चौड़ाई का उपयोग करेगा। यह मेरे लिए इस तरह के लेआउट की पवित्र कब्र है, जहां कोई स्तंभ या सामग्री की चौड़ाई निर्दिष्ट नहीं की जानी चाहिए, और सब कुछ स्वचालित रूप से उपलब्ध स्थान में पूरी तरह से फिट बैठता है।

— जेफ-एच

Answer 3

पहले इस तरह के एक सवाल का जवाब दिया, आप यहाँ परिणामों पर एक नज़र डाल सकते हैं:

एक-दूसरे के पास फ़ील्ड और टेक्स्ट बनाने के लिए फ़ॉर्म बनाना - इसे करने का शब्दार्थ तरीका क्या है?

तो अपने फिडेल के समान नियम लागू करने के लिए आप display:inline-blockअपने लेबल और इनपुट समूहों को एक साथ प्रदर्शित करने के लिए उपयोग कर सकते हैं , जैसे:

सीएसएस

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

अद्यतन की गई फ़िडल

Comments

यह एक बहुत अच्छा समाधान है, इस तथ्य को छोड़कर कि आपको लेबल्स की चौड़ाई को हार्ड-कोड करना होगा। यदि एक नया लेबल बहुत लंबा है - लेआउट टूट जाता है। लगता है कि अधिक मजबूत समाधान होना चाहिए?

— 1

Answer 4

मैं इसके समान कुछ का उपयोग करता हूं:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

अंदाज:

.form-element label {
    display: inline-block;
    width: 150px;
}

Answer 5

आप फ्लेक्स-बॉक्स का उपयोग करके भी देख सकते हैं

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

Comments

यह सुंदर है, लेकिन वह बिल्कुल नहीं जो उसने मांगा। चित्र को op में देखें

— phagon1

Answer 6

मुझे पता है कि यह एक पुराना धागा है, लेकिन एक आसान समाधान लेबल के भीतर इनपुट को एम्बेड करना होगा जैसे:

<label>Label one: <input id="input1" type="text"></label>

Comments

मैं इसके लिए एक समाधान ढूंढ रहा था (लेबल के अंदर इनपुट शामिल करें) लेकिन संरेखित पाठ के साथ

— नटिम जूल

Answer 7

यहां सभी फॉर्म लेबल के लिए जेनेरिक लेबल की चौड़ाई है। कुछ भी नहीं तय चौड़ाई।

सभी लेबल के साथ setLabelWidth कैलकुलेटर को कॉल करें। यह फ़ंक्शन UI पर सभी लेबल लोड करेगा और अधिकतम लेबल चौड़ाई का पता लगाएगा। सभी लेबलों के नीचे फ़ंक्शन का रिटर्न मान लागू करें।

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Answer 8

आप ऐसा कुछ कर सकते हैं:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

सीएसएस:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

उम्मीद है की यह मदद करेगा ! :)