Làm cách nào để mỗi yếu tố này có thể được chia thành các dòng mới, nhưng giữ chúng dưới dạng display = inline và không có br thẻ?CSS: Gây ngắt dòng cho các phần tử nội tuyến mà không cần <br />
<div>
<a href="element1">Element 1</a>
<a href="element1">Element 2</a>
<a href="element1">Element 3</a>
</div>
bạn có thể làm điều này bằng cách định nghĩa bằng width cho phụ huynh <div> và <a>. giả sử bạn áp dụng một lớp 'container' đến <div>
.container { width: 100px; }
a { width: 100px; display: inline; }
Đặt chúng trong danh sách không có thứ tự?
Không chắc tôi thực sự hiểu những gì bạn đang sau đây ...
Nếu bạn không hiểu, đừng trả lời. – deathlock
<style type="text/css">
div.probablyShouldPutAClassName a {
display: block;
}
</style>
Điều này có thể được thực hiện, nhưng sẽ không làm việc cho tất cả các trình duyệt. Bạn cần sử dụng phần tử giả :after với white-space và content. Giống như rất
<html>
<head>
<style type="text/css">
div a:after {white-space: pre;content:'\A';}
</style>
</head>
<body>
<div>
<a href="element1">Element 1</a>
<a href="element1">Element 2</a>
<a href="element1">Element 3</a>
</div>
</body>
</html>
Năm năm sau, tính tương thích của trình duyệt không còn là vấn đề nữa nhưng nó vẫn không phải là giải pháp phổ quát vì có các phần tử không có bất kỳ :: trước hoặc sau phần tử giả - ví dụ: ''. – wortwart
Đối với các yếu tố khối không chiếm toàn bộ dòng, thiết lập chiều rộng của nó đến một cái gì đó nhỏ và white-space:nowrap
label
{
width:10px;
display:block;
white-space:nowrap;
}
Tại sao bạn muốn làm cho họ các yếu tố nội tuyến nhưng có ngắt dòng sau chúng? Đó là khá nhiều định nghĩa của sự khác biệt giữa các yếu tố khối và các yếu tố nội tuyến –
Không, sự khác biệt giữa các yếu tố khối và nội tuyến là tinh tế hơn thế. –
Tôi đoán anh ấy muốn đặt chúng trên các dòng khác nhau và anh ấy được phép thay đổi CSS nhưng không được phép sử dụng HTML. –