Làm cách nào để căn chỉnh văn bản ở bên trái và văn bản ở bên phải trên cùng một dòng?

Làm thế nào tôi có thể căn chỉnh văn bản để một số văn bản căn chỉnh sang trái và một số văn bản căn chỉnh sang phải trong cùng một dòng?

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

Tôi có thể căn chỉnh tất cả văn bản sang trái (hoặc sang phải), trực tiếp nội dòng hoặc bằng cách sử dụng biểu định kiểu -

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

Làm cách nào để căn chỉnh văn bản tương ứng ở bên trái và bên phải trong khi vẫn giữ nó trên cùng một dòng?

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

Demo:
http://jsfiddle.net/W3Pxv/1

Nếu bạn không muốn sử dụng các phần tử nổi và muốn đảm bảo rằng cả hai khối không chồng lên nhau, hãy thử:

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

TẬP TIN HTML:

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

TẬP TIN CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

và bạn đã hoàn thành ....

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

css:

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

Mặc dù một số giải pháp ở đây sẽ hoạt động, nhưng không có giải pháp nào chồng chéo tốt và kết thúc chuyển một mục xuống dưới mục kia. Nếu bạn đang cố gắng bố trí dữ liệu sẽ bị ràng buộc động, bạn sẽ không biết cho đến khi chạy, rằng nó có vẻ xấu.

Những gì tôi muốn làm chỉ đơn giản là tạo một bảng hàng đơn và áp dụng float bên phải trên ô thứ hai. Không cần áp dụng căn lề trái ở lần đầu tiên, điều đó xảy ra theo mặc định. Điều này xử lý chồng chéo hoàn hảo bằng cách gói từ.

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/

Thêm khoảng trên mỗi hoặc nhóm từ bạn muốn căn trái hoặc phải. sau đó thêm id hoặc lớp trên span chẳng hạn như:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Nếu bạn đang sử dụng Bootstrap, hãy thử điều này:

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

Nếu bạn chỉ muốn thay đổi căn chỉnh của văn bản, chỉ cần tạo một lớp

.left {
text-align: left;
}

và mở rộng lớp đó qua văn bản

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