ฉันจะจัดข้อความให้ชิดซ้ายและข้อความไปทางขวาเป็นบรรทัดเดียวกันได้อย่างไร

ฉันจะจัดแนวข้อความเพื่อให้บางส่วนจัดแนวไปทางซ้ายและบางส่วนจัดแนวไปทางขวาในบรรทัดเดียวกันได้อย่างไร

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

ฉันจะจัดแนวข้อความที่สอดคล้องกันไปทางซ้ายและทางขวาโดยให้อยู่ในบรรทัดเดียวกันได้อย่างไร

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

HTML:

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

css:

.right{
    float:right;
}

.left{
    float:left;
}

การสาธิต:
http://jsfiddle.net/W3Pxv/1

หากคุณไม่ต้องการใช้องค์ประกอบแบบลอยและต้องการให้แน่ใจว่าทั้งสองบล็อกไม่ทับซ้อนกันให้ลอง:

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

ไฟล์ HTML:

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

ไฟล์ CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

แล้วเสร็จ ....

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

css:

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

แม้ว่าวิธีแก้ปัญหาหลายอย่างที่นี่จะใช้งานได้ แต่ไม่มีตัวจับที่ซ้อนทับกันได้ดีและท้ายที่สุดก็ย้ายรายการหนึ่งไปไว้ด้านล่างอีกรายการ หากคุณกำลังพยายามจัดวางข้อมูลที่จะเชื่อมโยงแบบไดนามิกคุณจะไม่รู้จนกว่ารันไทม์จะดูไม่ดี

สิ่งที่ฉันชอบทำคือสร้างตารางแถวเดียวแล้วใช้ลอยที่ถูกต้องกับเซลล์ที่สอง ไม่จำเป็นต้องใช้การจัดชิดซ้ายในครั้งแรกซึ่งจะเกิดขึ้นตามค่าเริ่มต้น จัดการสิ่งนี้ทับซ้อนกันอย่างสมบูรณ์แบบด้วยการตัดคำ

HTML

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

CSS

.alignRight {
  float: right;
}

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

เพิ่มช่วงในแต่ละคำหรือกลุ่มคำที่คุณต้องการจัดชิดซ้ายหรือขวา จากนั้นเพิ่ม id หรือ class ในช่วงเวลาเช่น:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

หากคุณใช้ Bootstrap ให้ลองทำดังนี้:

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

หากคุณต้องการเปลี่ยนการจัดแนวข้อความเพียงแค่สร้างคลาส

.left {
text-align: left;
}

และขยายชั้นเรียนนั้นผ่านข้อความ

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