Reference fiddle này: http://jsfiddle.net/exGnZ/Biến một danh sách có thứ tự vào một bảng nội dung
Hi, Tôi đang cố gắng để tái tạo một bảng nội dung với một danh sách có thứ tự và chấm lãnh đạo. Thật không may, khi có một dòng dài nội dung, định dạng bị hỏng. Có ai biết làm thế nào để có được Chương 2 trong hình dưới đây để xuất hiện trên cùng một dòng như các dấu chấm?
Dưới đây là đoạn code tôi đã có vào lúc này: http://jsfiddle.net/exGnZ/
Tôi cũng đang dán nó ở đây:
<div>
<ul id="toc">
<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> <a href="#">Chapter 2</a></li>
<li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
<li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
<li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
<li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li>
</ul></div>
Và CSS:
div {padding:10px;}
#toc {
list-style: none;
margin-bottom: 20px;
}
#toc li {
background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
overflow: hidden;
padding-bottom: 2px;
}
#toc a,
#toc span {
display: inline-block;
background: #fff;
position: relative;
bottom: -4px;
}
#toc a {
float: right;
padding: 0 0 3px 2px;
}
#toc span {
float: left;
padding: 0 2px 3px 0;
}
Giải pháp tuyệt vời. Điều duy nhất tôi muốn tôi có thể thay đổi về nó là không có văn bản ở phía bên trái gạch chân, nhưng tôi nghĩ rằng điều này là gần như chúng ta có thể nhận được với các trình duyệt hiện tại ... Chọn đây là câu trả lời. – Fred
Tôi đã nhận thấy điều đó. Nếu tôi có thêm chút thời gian, tôi chắc chắn tôi có thể nghĩ ra một thứ gì đó. Bit bận rộn vào lúc này. Tôi sẽ đăng lại sau nếu tôi nghĩ ra bất cứ điều gì. – Deadlykipper
Này, một khoảng phụ (đó không phải là cấp độ khối) giải quyết được vấn đề. Một khoảng thời gian chặn nội tuyến sẽ đặt chiều rộng và một (khoảng không theo khối) có thể được sử dụng để đặt nền trắng. Cảm ơn bạn đã giúp đỡ! – Fred