एक बटन सही संरेखित करें

Question

मैं एक बटन को दाएं संरेखित करने के लिए इस कोड का उपयोग करता हूं।

<p align="right">
  <input type="button" value="Click Me" />
</p>

लेकिन <p>टैग कुछ जगह बर्बाद करते हैं, इसलिए <span>या के साथ भी ऐसा ही करना चाहते हैं <div>।

Comments

यह alignविशेषता HTML 4.01 में पदावनत है और HTML5 में असमर्थित है, text-alignउसी प्रभाव को प्राप्त करने के लिए CSS का उपयोग करें ।

— वह ब्राजील के लड़के

Answer 1

आपके द्वारा उपयोग की जाने वाली संरेखण तकनीक आपकी परिस्थितियों पर निर्भर करती है लेकिन मूल एक है float: right;:

<input type="button" value="Click Me" style="float: right;">

आप शायद अपने फ़्लोट्स को साफ़ करना चाहते हैं, लेकिन यह overflow:hiddenमूल कंटेनर के साथ किया जा सकता है या कंटेनर <div style="clear: both;"></div>के नीचे एक स्पष्ट ।

उदाहरण के लिए: http://jsfiddle.net/ambiguous/8UvVg/

फ्लोट किए गए तत्वों को सामान्य दस्तावेज़ प्रवाह से हटा दिया जाता है ताकि वे अपने माता-पिता की सीमा को ओवरफ्लो कर सकें और माता-पिता की ऊंचाई को गड़बड़ कर सकें, clear:bothसीएसएस उस पर ध्यान देता है (जैसा कि करता है overflow:hidden)। JSFiddle उदाहरण के साथ चारों ओर खेलते हैं मैंने यह देखने के लिए जोड़ा कि फ्लोटिंग और क्लियरिंग कैसे व्यवहार करते हैं (आप overflow:hiddenहालांकि पहले ड्रॉप करना चाहते हैं )।

Answer 2

एक और संभावना सही के लिए उन्मुख एक पूर्ण स्थिति का उपयोग करना है:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

यहाँ एक उदाहरण है: https://jsfiddle.net/a2Ld1xse/

इस समाधान के अपने डाउनसाइड हैं, लेकिन ऐसे मामले हैं जहां यह बहुत उपयोगी है।

Comments

यदि आप स्थिति जोड़ते हैं: मूल तत्व के सापेक्ष, यह ठीक काम करता है!

— DHRUV GAJWA

Answer 3

यदि बटन केवल इस elementपर है block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

तो देखते हैं अन्य elements पर block:

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

के साथ flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}

<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

शुभ लाभ...

Comments

margin-left:autoबहुत अच्छा है! !importantसबसे बुरा, यह भविष्य में समस्याओं का कारण बन जाएगा।

— टॉम ब्रिटो

हाय @TomBrito, मैंने जवाब के साथ अद्यतन किया है display: flex;। यह हर चीज का ख्याल रखता है।

— आकाश

इस जवाब से बेहतर है कि इसे क्रेडिट मिल जाए ... बस उपयोग न करें! महत्वपूर्ण

— tpie

Answer 4

यह समाधान बूटस्ट्रैप 3 पर निर्भर करता है, जैसा कि @ günther-jena द्वारा बताया गया है

कोशिश करो <a class="btn text-right">Call to Action</a>। इस तरह आपको फ्लोट किए गए तत्वों को हटाने के लिए अतिरिक्त मार्कअप या नियमों की आवश्यकता नहीं है।

Comments

क्षमा करें, यह केवल तभी काम करता है जब आप एंकर टैग के लिए मूल कंटेनर पर "टेक्स्ट-राइट" डालते हैं।

— जोनाथन लालबिर्ते

Answer 5

फ्लेक्स-बॉक्स का उपयोग करके 2019 में एक आधुनिक दृष्टिकोण

div टैग के साथ

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

स्पैन टैग के साथ

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Answer 6

एक और संभावना सही के लिए उन्मुख एक पूर्ण स्थिति का उपयोग करना है। आप इसे इस तरह से कर सकते हैं:

style="position: absolute; right: 0;"

Comments

यकीन है, लेकिन अगर वहाँ एक माता पिता है div, यह जोरदार अपने कारावास की अनदेखी करेगा।

— हसन बेग

Answer 7

यह हमेशा इतना आसान नहीं होता है और कभी-कभी संरेखण को कंटेनर में परिभाषित किया जाना चाहिए और बटन तत्व में ही नहीं!

आपके मामले के लिए, समाधान होगा

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

मैंने यह width=100%सुनिश्चित करने के लिए ध्यान रखा है कि यह सुनिश्चित हो<div> उसके कंटेनर की पूरी चौड़ाई लें।

मैंने तत्व padding:0से पहले और बाद में अंतरिक्ष से बचने के लिए भी जोड़ा है <p>।

मैं कह सकता हूं कि यदि <div>FSF / प्राइमफेस टेबल के पाद में परिभाषित किया गया है, float:rightतो सही ढंग से काम न करें क्योंकि बटन की ऊंचाई पाद ऊंचाई से अधिक हो जाएगी!

इस प्राइमफेस स्थिति में, text-align:rightकंटेनर में उपयोग करने के लिए एकमात्र स्वीकार्य समाधान है ।

इस समाधान के साथ, यदि आपके पास दाईं ओर संरेखित करने के लिए 6 बटन हैं, तो आपको केवल इस संरेखण को कंटेनर में निर्दिष्ट करना होगा :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Answer 8

पृष्ठ प्रवाह में बटन रखने के लिए:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(उस शैली को .css फ़ाइल में रखें, बेहतर रखरखाव के लिए इस html इनलाइन का उपयोग न करें)

Answer 9

यह इसे हल करेगा।

<input type="button" value="Text Here..." style="float: right;">

अपने कोड के साथ गुड लक!

Comments

यह शीर्ष स्कोर उत्तर की एक प्रति है

— गुंथर जेना

Answer 10

मेरे मामले में

<p align="right"/>

ठीक काम किया

Comments

यह एक उत्तर नहीं है। संरेखित विशेषता HTML 4.01 में पदावनत है और HTML5 में असमर्थित है, उसी प्रभाव को प्राप्त करने के लिए CSS पाठ-संरेखित का उपयोग करें

— Sfili_81

Answer 11

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

Comments

आपके उत्तर के लिए थोड़ा और संदर्भ उपयोगी होगा।

— डेविड क्लार्क