Khối hiển thị không có 100% chiều rộng

Tôi muốn đặt một phần tử span xuất hiện bên dưới một phần tử khác bằng cách sử dụng thuộc tính hiển thị. Tôi đã thử áp dụng khối nội tuyến nhưng không thành công và nhận ra rằng tôi có thể sử dụng khối nếu bằng cách nào đó tôi tránh được việc cung cấp cho phần tử chiều rộng 100% (tôi không muốn phần tử "giãn ra"). Điều này có thể được thực hiện, hoặc nếu không, phương pháp tốt để giải quyết loại vấn đề này là gì?

Ví dụ: danh sách tin tức mà tôi muốn đặt liên kết "đọc thêm" ở cuối mỗi bài đăng (lưu ý: <a>thay vì <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Cập nhật: Đã giải quyết. Trong CSS, hãy áp dụng

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Nếu tôi hiểu đúng câu hỏi của bạn, CSS sau sẽ thả nổi một câu hỏi của bạn bên dưới các nhịp và giữ cho nó không có chiều rộng 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}

Sử dụng display: table.

Câu trả lời này phải có ít nhất 30 ký tự; Tôi đã bước vào tuổi 20, vì vậy đây là một vài điểm khác.

bạn có thể dùng:

width: max-content;

Lưu ý: hỗ trợ bị giới hạn, hãy kiểm tra tại đây để biết bảng phân tích đầy đủ về các trình duyệt hỗ trợ

Tôi sẽ giữ mỗi hàng thành div riêng của nó, vì vậy ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

Và sau đó đối với CSS:

.cell{display:inline-block}

Thật khó để cung cấp cho bạn một giải pháp mà không nhìn thấy mã gốc của bạn.

Một lần nữa: một câu trả lời có thể hơi muộn (nhưng dù sao thì đối với những người tìm thấy trang này sẽ có câu trả lời).

Thay vì display:block;sử dụngdisplay:inline-block;

Thử cái này:

li a {
    width: 0px;
    white-space:nowrap;
}

Tôi đã gặp sự cố này, tôi đã giải quyết nó như vậy:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space: nowrap" đảm bảo rằng các phần tử con (nếu có) không chuyển sang dòng mới nếu không đủ dung lượng.

không có "khoảng trắng: nowrap":

với "white-space: nowrap":

chỉnh sửa: có vẻ như nó cũng chỉ hoạt động mà không có phần chặn con đối với tôi, vì vậy điều này có vẻ hoạt động tốt.

.parent {
  white-space: nowrap;
  display: table;
}

Bạn có thể sử dụng như sau:

display: inline-block;

Hoạt động tốt trên các liên kết và các yếu tố khác.