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 trong cùng một dòng?

Question

Làm cách nào để căn chỉnh văn bản để một số văn bản căn chỉnh sang bên trái và một số văn bản căn chỉnh bên 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ể sắp xếp tất cả các văn bản sang bên trái (hoặc bên phải), hoặc trực tiếp nội tuyến, hoặc bằng cách sử dụng một stylesheet -

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

Làm thế nào tôi có thể sắp xếp các văn bản tương ứng với trái và phải, trong khi vẫn giữ nó trên cùng một dòng?

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/

Answer 2

HTML:

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

css:

.right{ 
    float:right; 
} 

.left{ 
    float:left; 
} 

D emo:
http://jsfiddle.net/W3Pxv/1

Answer 3

HTML FILE:

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

CSS FILE:

.left 
{ 
    float: left; 
} 

.right 
{ 
    float: right; 
} 

và bạn đã làm xong ....

Answer 4

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

.left { 
text-align: left; 
} 

và span class rằng thông qua các văn bản

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

Answer 5

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

css:

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

Answer 6

Nếu bạn không muốn sử dụng các yếu tố nổi và muốn chắc chắn 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> 

Answer 7

Mặc dù một số giải pháp ở đây sẽ hoạt động, không có xử lý nào chồng chéo lên nhau và kết thúc việc di 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ẽ được tự động ràng buộc bạn sẽ không biết cho đến khi thời gian chạy mà nó trông xấu.

Điều tôi muốn làm chỉ đơn giản là tạo một bảng hàng đơn và áp dụng phao bên phải trên ô thứ hai. Không cần phải áp dụng một căn trái trê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/

Answer 8

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

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

CSS-

#makeLeft{ 
float: left; 
} 

#makeRight{ 
float: right; 
}