इनपुट के अंदर ग्रंथों को कैसे संरेखित करें?

208

सभी डिफ़ॉल्ट इनपुट के लिए, आपके द्वारा भरा गया पाठ बाईं ओर शुरू होता है। आप इसे सही पर कैसे शुरू करते हैं?

— phz
स्रोत

2

यह फ़ील्ड को दाएँ-से-बाएँ भाषा के साथ संगत करने के लिए बदल रहा है?

— एस। अल्बानो

इनपुट {पाठ-संरेखण: सही; }

— रसिका

327

अपने CSS में text-align संपत्ति का उपयोग करें :

input { 
    text-align: right; 
}

यह पृष्ठ के सभी इनपुट में प्रभावी होगा।
अन्यथा, यदि आप सिर्फ एक इनपुट के पाठ को संरेखित करना चाहते हैं, तो स्टाइल इनलाइन सेट करें:

<input type="text" style="text-align:right;"/>

— एलियास
स्रोत

24

अपने CSS में इसे आज़माएं:

input {
text-align: right;
}

केंद्र में पाठ संरेखित करने के लिए:

input {
text-align: center;
}

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

— Gautam3164
स्रोत

9

यहाँ तुम जाओ :

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

स्निपेट का विस्तार करें

— सिंथिया
स्रोत

9

यहां स्वीकृत उत्तर सही है लेकिन मैं थोड़ी जानकारी जोड़ना चाहूंगा। यदि आप एक पुस्तकालय / ढांचे का उपयोग कर रहे हैं जैसे बूटस्ट्रैप इसके लिए कक्षाओं में बनाया जा सकता है। उदाहरण के लिए बूटस्ट्रैप text-rightकक्षा का उपयोग करता है । इसे इस तरह उपयोग करें:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

नोट के रूप में यह अन्य इनपुट प्रकारों पर भी काम करता है, जैसे कि संख्यात्मक जैसा कि ऊपर दिखाया गया है।

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

.text-right{
    text-align: right;
}

अब आप इस वर्ग को ठीक उसी तरह उपयोग कर सकते हैं जैसे ऊपर दिए गए इनपुट के साथ class="text-right"। मुझे पता है कि यह कई महत्वपूर्ण स्ट्रोक नहीं बचा रहा है, लेकिन यह आपके कोड को क्लीनर बनाता है।

— डग ई फ्रेश
स्रोत

3

यदि आप पाठ खो जाने के बाद इसे दाईं ओर संरेखित करना चाहते हैं तो आप दिशा संशोधक का उपयोग करने का प्रयास कर सकते हैं। यह फोकस खोने के बाद टेक्स्ट का सही हिस्सा दिखाएगा। उदाहरण के लिए यदि आप फ़ाइल नाम को बड़े पथ में दिखाना चाहते हैं तो उपयोगी है।

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

स्निपेट का विस्तार करें

वर्तमान में चयनकर्ता नहीं समर्थित है: ब्राउज़र समर्थन

— rulonder
स्रोत

0

@ Html.TextBoxFor (मॉडल => model.IssueDate, नया {@class = "फ़ॉर्म-नियंत्रण", नाम = "inv_issue_date", id = "inv_issue_date", शीर्षक = "चालान मुद्दे की तिथि चुनें", प्लेसहोल्डर = "dd / mm / mm" / yyyy ", style =" text-align: center; "})

— नदीम ताज
स्रोत

-5

बिना CSS: पाठ इनपुट के स्टाइल संपत्ति का उपयोग करें

स्टाइल = "पाठ-संरेखित करें: सही?"

— हरदीप सिंह
स्रोत

11

यह अभी भी सीएसएस है, बस इनलाइन सीएसएस है।

— मार्टिन हैनसेन

2

इनलाइन CSS बनाने के लिए स्टाइल विशेषता का उपयोग किया जाता है। कोड text-align:rightनिश्चित रूप से सीएसएस है।

— रॉन