मैं एक पंक्ति में दाईं ओर बाईं ओर पाठ को कैसे संरेखित कर सकता हूं?

Question

मैं पाठ को कैसे संरेखित कर सकता हूं ताकि उसमें से कुछ बाईं ओर संरेखित हो और कुछ उसी पंक्ति में दाईं ओर संरेखित हों?

<p>This text should be left-aligned. This text should be right aligned.</p> 

मैं सभी पाठों को बाईं ओर (या दाईं ओर) संरेखित कर सकता हूं, या तो सीधे इनलाइन, या स्टाइलशीट का उपयोग करके -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

उसी पंक्ति में रहते हुए, मैं उसी पाठ को बाईं और दाईं ओर कैसे संरेखित कर सकता हूं?

Answer 1

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

https://jsfiddle.net/gionaf/5z3ec48r/

Comments

text-align:left;यह ऐसा होना चाहिए float:left;जैसे <p> <span style = "float: left;"> बायां पाठ </ span> <span style = "float: right;"> सही पाठ </ span> </ p>

— शीलेंद्र मद्दा

Answer 2

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>​

सीएसएस:

.right{
    float:right;
}

.left{
    float:left;
}

डेमो:
http://jsfiddle.net/W3Pxv/1

Comments

@mawg यद्यपि यह हो सकता है, मैं शीर्ष उत्तर को प्राथमिकता देता हूं क्योंकि इसमें सीएसएस की आवश्यकता नहीं होती है।

— मेनाशेह

वर्तमान में "शीर्ष पर" या "सबसे अधिक वोट"? वे दोनों बदल सकते हैं, इसलिए आप किसी भी भविष्य के पाठकों की मदद नहीं कर रहे हैं :-) वैसे भी, जब मैंने आपकी तरह शुरुआत की, सभी स्टाइल इन-लाइन के साथ, मुझे जल्द ही एहसास हुआ कि सामग्री और प्रस्तुति को अलग करने के अच्छे कारण हैं। सीएसएस डरावना नहीं है और चारों ओर बहुत सारे मुफ्त ट्यूटोरियल हैं - इसके लिए जाएं

— मावग का कहना है कि मोनिका को

Answer 3

यदि आप फ़्लोटिंग तत्वों का उपयोग नहीं करना चाहते हैं और यह सुनिश्चित करना चाहते हैं कि दोनों ब्लॉक ओवरलैप न हों, तो प्रयास करें:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Comments

यह एकमात्र उत्तर है जो आपको केवल दो कॉलम से अधिक का उपयोग करने की अनुमति देता है, जो कि मुझे चाहिए था। हालांकि यह ओपी की परवाह किए बिना शायद अधिक दानेदार नियंत्रण है।

— क्रिस्टन हैमैक

Answer 4

HTML फ़ाइल:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

सीएसएस फ़ाइल:

.left
{
  float: left;
}

.right
{
  float: right;
}

और आप कर रहे हैं ...।

Answer 5

<h1> left <span> right </span></h1>

सीएसएस:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Answer 6

जबकि यहाँ समाधान के कई काम करेंगे, कोई भी ओवरलैप को अच्छी तरह से नहीं संभालता है और एक आइटम को दूसरे के नीचे ले जाने के लिए समाप्त होता है। यदि आप ऐसे डेटा को लेआउट करने की कोशिश कर रहे हैं जो गतिशील रूप से बाध्य होगा तो आपको रनटाइम तक पता नहीं चलेगा कि यह खराब लग रहा है।

मुझे क्या करना पसंद है बस एक पंक्ति पंक्ति बनाएं और दूसरे सेल पर सही फ्लोट लागू करें। पहले पर एक बाएं-संरेखित करने की आवश्यकता नहीं है, जो डिफ़ॉल्ट रूप से होता है। यह शब्द-लपेटन द्वारा पूरी तरह से ओवरलैप को संभालता है।

एचटीएमएल

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

सीएसएस

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Comments

यह मेरे लिए स्वर्ण के करीब है, लेकिन सीएसएस तालिका गुणों का उपयोग करने का कोई विचार दो कोशिकाओं को क्षैतिज रूप से लाइन से बाहर कर देता है? jsfiddle.net/7wddxks5/7 मैं इसके आस-पास नहीं जा सकता।

— AddMitt

दरअसल, मेरे लिए, चूंकि मैं सही पाठ को दाईं ओर संरेखित करना चाहता हूं, यह पूरी तरह से काम करने लगता है अगर मैं बस पाठ-संरेखित करता हूं: सही और फ्लोट से छुटकारा पाएं।

— AddMitt

मैं यह पता नहीं लगा सका कि यह ऊर्ध्वाधर शिफ्टिंग का कारण क्यों बन रहा था। लेकिन मैं इसे ऊर्ध्वाधर-संरेखण के साथ ठीक करने में सक्षम था। HTML को थोड़ा साफ करने के लिए शैलियों को कक्षाओं में भी खींचा। jsfiddle.net/o10ogqkd

— एरिक सोयके

यह यहाँ एक सुरुचिपूर्ण समाधान है। मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए क्योंकि यह तालिका टैग का उपयोग करने में अधिक रचनात्मकता को नियोजित करता है

— 12:22

Answer 7

प्रत्येक या उन शब्दों के समूह पर स्पैन जोड़ें जिन्हें आप बाएं या दाएं संरेखित करना चाहते हैं। फिर इस अवधि पर आईडी या वर्ग जोड़ें:

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Comments

Html कल्पना के अनुसार, आपके उदाहरण को एक वर्ग का उपयोग करना चाहिए, न कि एक आईडी का।

— सर्जियो

Answer 8

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो यह कोशिश करें:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Answer 9

यदि आप सिर्फ पाठ के संरेखण को बदलना चाहते हैं तो बस एक कक्षाएं बनाएं

.left {
text-align: left;
}

और पाठ के माध्यम से उस वर्ग को फैलाएं

<span class='left'>aligned left</span>

Comments

यह प्रति पंक्ति उत्परिवर्ती संरेखण के प्रश्न का आधा उत्तर है।

— तिमज़ामन