Hướng dẫn text left and right same line html - văn bản bên trái và bên phải cùng một dòng html

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

This text should be left-aligned. This text should be right aligned.
 

Tôi có thể căn chỉnh tất cả các văn bản ở bên trái [hoặc bên phải], trực tiếp nội tuyến hoặc bằng cách sử dụng một bảng kiểu -

This text should be left-aligned. 
    This text should be right aligned.

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

Eilidh

1.2601 Huy hiệu vàng13 Huy hiệu bạc33 Huy hiệu đồng1 gold badge13 silver badges33 bronze badges

Hỏi ngày 15 tháng 9 năm 2012 lúc 14:48Sep 15, 2012 at 14:48

0

    This text is left aligned
    
        This text is right aligned
    

//jsfiddle.net/gionaf/5z3ec48r/

ahota

3,8487 Huy hiệu vàng35 Huy hiệu bạc59 Huy hiệu Đồng7 gold badges35 silver badges59 bronze badges

Đã trả lời ngày 15 tháng 9 năm 2012 lúc 14:50Sep 15, 2012 at 14:50

GionagionaGiona

20.2k4 Huy hiệu vàng56 Huy hiệu bạc68 Huy hiệu Đồng4 gold badges56 silver badges68 bronze badges

1

HTML:

Right alignedLeft aligned​

CSS:

.right{
    float:right;
}

.left{
    float:left;
}

Bản demo: //jsfiddle.net/w3pxv/1
//jsfiddle.net/W3Pxv/1

Đã trả lời ngày 15 tháng 9 năm 2012 lúc 14:53Sep 15, 2012 at 14:53

PuyolpuyolPuyol

2.9645 Huy hiệu vàng24 Huy hiệu bạc33 Huy hiệu Đồng5 gold badges24 silver badges33 bronze badges

2

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

LEFT
RIGHT

Đã trả lời ngày 5 tháng 10 năm 2015 lúc 10:58Oct 5, 2015 at 10:58

Jack Millerjack MillerJack Miller

6.1672 Huy hiệu vàng42 Huy hiệu bạc58 Huy hiệu Đồng2 gold badges42 silver badges58 bronze badges

1

Một câu trả lời sử dụng bố cục CSS Flex và biện minh nội dung

p {
  display: flex;
  justify-content: space-between;
}

  This text is left aligned
  This text is right aligned

Đã trả lời ngày 16 tháng 12 năm 2020 lúc 12:12Dec 16, 2020 at 12:12

2

Tệp HTML:

Tệp CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

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

Đã trả lời ngày 15 tháng 9 năm 2012 lúc 15:05Sep 15, 2012 at 15:05

1

Trong khi một số giải pháp ở đây sẽ hoạt động, không có giải pháp nào được xử lý tốt và cuối cùng di chuyển một mục xuống dưới cái 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 mà nó trông rất tệ.

Những gì tôi thích làm chỉ đơn giản là tạo một bảng hàng duy nhất 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 chỉnh bên trái vào đầu tiên, điều đó xảy ra theo mặc định. Điều này xử lý sự chồng chéo hoàn hảo bằng cách bao bọc từ.

HTML

This text should be left-aligned. 
    This text should be right aligned.

CSS

This text should be left-aligned. 
    This text should be right aligned.

//jsfiddle.net/esoyke/7wddxks5/

Đã trả lời ngày 16 tháng 2 năm 2016 lúc 19:06Feb 16, 2016 at 19:06

Eric Soykeeric SoykeEric Soyke

1.04515 Huy hiệu bạc 30 Huy hiệu Đồng15 silver badges30 bronze badges

4

This text should be left-aligned. 
    This text should be right aligned.

css:

This text should be left-aligned. 
    This text should be right aligned.

Đã trả lời ngày 15 tháng 9 năm 2012 lúc 16:08Sep 15, 2012 at 16:08

Thêm nhịp trên mỗi hoặc nhóm từ bạn muốn căn chỉnh trái hoặc phải. Sau đó thêm ID hoặc lớp trên nhịp như:

This text should be left-aligned. 
    This text should be right aligned.

CSS-

This text should be left-aligned. 
    This text should be right aligned.

Đã trả lời ngày 6 tháng 11 năm 2016 lúc 21:04Nov 6, 2016 at 21:04

1

Một ví dụ, chỉ để cho thấy sự phong phú của giải pháp từ Benjamin Udink Ten Cate trong câu trả lời ở trên: "Một câu trả lời sử dụng bố cục CSS Flex và biện minh nội dung"

Với CSS này:

This text should be left-aligned. 
    This text should be right aligned.

This text should be left-aligned. 
    This text should be right aligned.

Đây là cách tôi làm pinout. :-]

Đã trả lời ngày 8 tháng 3 lúc 8:08Mar 8 at 8:08

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

This text should be left-aligned. 
    This text should be right aligned.

Đã trả lời ngày 19 tháng 3 năm 2020 lúc 19:23Mar 19, 2020 at 19:23

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

This text should be left-aligned. 
    This text should be right aligned.

và trải qua lớp học đó thông qua văn bản

    This text is left aligned
    
        This text is right aligned
    

Đã trả lời ngày 15 tháng 9 năm 2012 lúc 15:42Sep 15, 2012 at 15:42

BntrnSbntrnsbntrns

4541 Huy hiệu vàng8 Huy hiệu bạc16 Huy hiệu đồng1 gold badge8 silver badges16 bronze badges

1

Làm cách nào để căn chỉnh văn bản cả trái và phải trong HTML?

Làm cách nào để căn chỉnh văn bản ở cả hai bên trong HTML?

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