Thiết lập chiều rộng của các yếu tố nội tuyến

Question

Bạn có thể thiết lập độ rộng của các yếu tố nội tuyến như <span>, <em> và <strong>, nhưng bạn sẽ không nhận thấy bất kỳ tác dụng cho đến khi bạn đặt chúng.

a) Tôi nghĩ chiều rộng của nội tuyến không thể đặt thành phần nội tuyến?

b) Giả sử chiều rộng có thể được đặt - chúng tôi sẽ không nhận thấy bất kỳ hiệu ứng nào (do đó, chiều rộng chúng tôi chỉ định) cho đến khi chúng tôi định vị phần tử nội tuyến. Vị trí như thế nào/ở đâu?

c) Tại sao chiều rộng của các phần tử nội tuyến chỉ rõ ràng khi chúng tôi "định vị" chúng?

Answer 1

Như những người khác đã đề cập, việc đặt chiều rộng (hoặc một số thuộc tính liên quan đến vị trí khác) của phần tử nội tuyến sẽ khiến trình duyệt hiển thị phần tử dưới dạng phần tử khối.

Bạn có thể tuyên bố rõ ràng loại hành vi này thông qua việc sử dụng thuộc tính CSS display. Cài đặt phổ biến nhất là display: inline (mặc định), display: block và display: none.
Tham chiếu đầy đủ cho thuộc tính display có sẵn here.

Tuy nhiên, cần lưu ý rằng HTML 4.01 specification không khuyến khích việc sử dụng "trọng việc giải thích thông thường của các phần tử HTML":

Style sheets cung cấp các phương tiện để định việc vẽ của yếu tố tùy ý, bao gồm cả việc một phần tử được hiển thị dưới dạng khối hoặc nội dòng. Trong một số trường hợp, chẳng hạn như một phong cách inline cho các yếu tố danh sách, điều này có thể thích hợp, nhưng nói chung, tác giả được khuyến khích từ trọng các giải thích thông thường của các phần tử HTML trong theo cách này.

Answer 2

a) Chiều rộng của một phần tử nội tuyến bị bỏ qua

b, c) Khi bạn "vị trí" một yếu tố nội tuyến (tôi giả sử có nghĩa là sử dụng position: absolute), bạn đang thực sự làm cho nó một khối phần tử có chiều rộng được diễn giải bởi trình duyệt

Answer 3

Tôi nghĩ rằng khi bạn chỉ định thuộc tính vị trí cho phần tử "nội tuyến", phần tử không còn được hiển thị inline và thay vào đó đang được coi là yếu tố cấp khối.

Answer 4

Điều đó về cơ bản có nghĩa là nếu bạn áp dụng position: absolute cho phần tử nội tuyến, nó sẽ trở thành phần tử khối và tăng chiều rộng.

Answer 5

Ngoài ra còn có tùy chọn hiển thị : inline-block, có thể cung cấp cho bạn tốt nhất của cả hai thế giới. Tuy nhiên, hãy cẩn thận về khả năng tương thích giữa các trình duyệt.

Answer 6

a. Chiều rộng của các phần tử nội tuyến bị bỏ qua.

b.Trên thực tế, bạn có thể áp dụng chiều rộng cho phần tử nếu đặt display: inline-block; nhưng để xem kết quả, bạn cũng nên áp dụng overflow: hidden;.

Để có tất cả lợi ích của inline và ngăn chặn các loại bạn có thể sử dụng đoạn mã sau:

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

Trong trường hợp này, bạn có thể quản lý chiều rộng và có tính năng lược văn bản.

Answer 7

Phần tử nội tuyến không được có chiều rộng. Chiều rộng là thuộc tính của phần tử khối. Vì vậy, để sử dụng tài sản của chiều rộng trên một yếu tố nội tuyến hoặc một yếu tố với kiểu hiển thị thiết lập nội tuyến hiển thị như inline-block ví dụ: display: inline-block;