Hướng dẫn how do i align two words on the same line in html? - làm cách nào để căn chỉnh hai từ trên cùng một dòng trong html?

Tôi có hai từ sẽ thay đổi sau một số mã hóa JavaScript. Họ sẽ là mảng. Tôi có thể thực hiện tốt mã hóa JavaScript, nhưng tôi muốn chúng được căn chỉnh thay vì cái này trên cái kia:

   
    
    
Inglés
 
    
Português
    
    Test Array
    

Mã hóa CSS của tôi:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

Các từ "Inglés" và "Bồ Đào Nha" sẽ trở thành cột sau một số lệnh JavaScript, nhưng chúng không được căn chỉnh và tôi muốn chúng được căn chỉnh.

marc_s

715K172 Huy hiệu vàng1315 Huy hiệu bạc1434 Huy hiệu đồng172 gold badges1315 silver badges1434 bronze badges

hỏi ngày 18 tháng 3 năm 2020 lúc 12:36Mar 18, 2020 at 12:36

1

.pTextIng {
    border:1px solid black;
   width:80px;
 display:inline-block;
}

.pTextPor {
border:1px solid red;
     width:80px;    
  display:inline-block;
}

   
    
    
Inglés
 
    
Português
    
    Test Array
 

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

ManjuboyzmanjuboyzManjuboyz

6.7833 huy hiệu vàng19 Huy hiệu bạc40 Huy hiệu đồng3 gold badges19 silver badges40 bronze badges

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

HTML:

    Inglés 
    Português

CSS:

.indentation {
    display: inline-block;
    margin-left: 45%;
}

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

0

Nếu bạn tạo một

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

   
    
    

        
Inglés
 
        
Português
  
    
  
    Test Array
 

Và sau đó bạn thực hiện phần tử

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    border:1px solid black;
   width:80px;
 display:inline-block;
}

.pTextPor {
border:1px solid red;
     width:80px;    
  display:inline-block;
}

.pTextIng {
    border:1px solid black;
   width:80px;
 display:inline-block;
}

.pTextPor {
border:1px solid red;
     width:80px;    
  display:inline-block;
}

.idiomas{
    display: flex;
    flex-direction: row;
}

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

1

Bạn cần thêm chiều dọc-Align: Top; Để khắc phục sự cốvertical-align: top; to fix the issue

.testAlign p {
    display: inline-block;
    vertical-align: top;
    /* other styles */
}

và các thẻ

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

    
    
Inglés
 
    
Português

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

Đôi khi có thể hữu ích khi có một số văn bản được căn chỉnh bên trái và một số văn bản được căn chỉnh bên phải trên cùng một dòng. Ví dụ: trong một chân trang, nơi bạn có thể muốn có thông tin bản quyền ở bên trái và thông tin quản trị trang web ở bên phải. Đây là cách bạn có thể muốn HTML của mình:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

Nếu bạn nên cung cấp cho các lớp CSS của bạn Alignleft và AlignRight của văn bản-Align: trái; và văn bản-Align: Phải; tương ứng, bạn sẽ đến gần với kết quả mong muốn của mình, nhưng văn bản được liên kết bên phải của bạn sẽ bị đẩy xuống một dòng vì đoạn văn mới. Thay vào đó, chỉ cần nổi các đoạn văn của bạn:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

Sau đó, chỉ cần nhớ để xóa phao của bạn:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

Xem bản demo

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

Làm thế nào để bạn sắp xếp các từ trong html?

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