Ngăn chặn ngắt dòng sau </div>

Có cách nào để ngăn ngắt dòng sau div bằng css không?

Ví dụ tôi có

<div class="label">My Label:</div>
<div class="text">My text</div>

và muốn nó hiển thị như sau:

Nhãn của tôi: Văn bản của tôi

display:inline;

HOẶC LÀ

float:left;

HOẶC LÀ

display:inline-block; - Có thể không hoạt động trên tất cả các trình duyệt.

Mục đích sử dụng a divở đây là gì? Tôi đề xuất một span, vì nó là một phần tử cấp nội tuyến, trong khi a divlà một phần tử cấp khối.

Lưu ý rằng mỗi tùy chọn ở trên sẽ hoạt động khác nhau.

display:inline;sẽ biến divthành tương đương với a span. Nó sẽ không bị ảnh hưởng bởi margin-top, margin-bottom, padding-top, padding-bottom, height,, vv

float:left;giữ nguyên divnhư một phần tử cấp khối. Nó vẫn sẽ chiếm không gian như thể nó là một khối, tuy nhiên chiều rộng sẽ được phù hợp với nội dung (giả sử width:auto;). Nó có thể yêu cầu một clear:left;hiệu ứng nhất định.

display:inline-block;là lựa chọn "tốt nhất của cả hai thế giới". Các divđược coi là một yếu tố ngăn chặn. Nó phản ứng với tất cả các margin, paddingvà heightquy tắc như mong đợi cho một yếu tố ngăn chặn. Tuy nhiên, nó được coi như một phần tử nội tuyến với mục đích đặt bên trong các phần tử khác.

Đọc cái này để biết thêm thông tin.

.label, .text {display: inline}

Mặc dù nếu bạn sử dụng nó, bạn cũng có thể thay đổi div's thành span.

DIV theo mặc định là phần tử hiển thị KHỐI, nghĩa là nó nằm trên dòng riêng của nó. Nếu bạn thêm hiển thị thuộc tính CSS: nội dòng, nó sẽ hoạt động theo cách bạn muốn. Nhưng có lẽ bạn nên xem xét một SPAN thay thế?

<span class="label">My Label:</span>
<span class="text">My text</span>

Các divphần tử là các phần tử khối, vì vậy theo mặc định, chúng có chiều rộng có sẵn đầy đủ.

Một cách là biến chúng thành các phần tử nội tuyến:

.label, .text { display: inline; }

Điều này sẽ có tác dụng tương tự như sử dụng spancác phần tử thay vì các divphần tử.

Một cách khác là làm nổi các phần tử:

.label, .text { float: left; }

Điều này sẽ thay đổi cách quyết định độ rộng của các phần tử, do đó thwy sẽ chỉ rộng bằng nội dung của chúng. Nó cũng sẽ làm cho các yếu tố trôi nổi bên cạnh nhau, tương tự như cách hình ảnh chảy bên cạnh nhau.

Bạn cũng có thể xem xét thay đổi các yếu tố. Phần divtử được thiết kế để phân chia tài liệu, tôi thường sử dụng một labelvà một spanphần tử cho một cấu trúc như thế này:

<label>My Label:</label>
<span>My text</span>

div được sử dụng để cung cấp cấu trúc cho một trang web hoặc chứa nhiều văn bản hoặc phần tử, nhưng bạn dường như sử dụng chúng làm nhãn, bạn nên sử dụng span, nó sẽ tự động đặt cả hai văn bản bên cạnh nhau và bạn sẽ không cần phải viết mã css cho nó.

Và ngay cả khi người khác yêu cầu bạn thả nổi các phần tử, tốt nhất bạn nên thay đổi các thẻ.

Tôi không nghĩ rằng tôi đã xem phiên bản này:

<div class="label">My Label:<span class="text">My text</span></div>

<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

Thử áp dụng clear:nonethuộc tính css cho nhãn.

.label {
     clear:none;
}

thử float div của bạn trong css

.label {
float:left;
width:200px;
}
.text {
float:left;
}

Tôi đã nhiều lần thành công để có được div mà không có dấu ngắt dòng sau chúng, bằng cách thử với thuộc tính float css và thuộc tính width css.
Tất nhiên sau khi tìm ra giải pháp, bạn phải thử nghiệm nó trên tất cả các trình duyệt và trong mỗi trình duyệt, bạn phải kích thước lại các cửa sổ để đảm bảo rằng nó hoạt động trong mọi trường hợp.

sử dụng mã này cho div bình thường display: inline;

sử dụng mã này nếu bạn sử dụng nó trong bảng display: inline-table; tốt hơn bảng

hãy thử điều này (trong CSS) để ngăn ngắt dòng trong divvăn bản:

white-space: nowrap;