2012-01-17 30 views
7

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?

enter image description here

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; 
    } 

Trả lời

3

Làm thế nào về điều này: http://jsfiddle.net/exGnZ/40/

Tốt nhất tôi có thể quản lý trong thời gian tôi có.

+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

+0

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

+0

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

3

Đây là vết nứt của tôi tại đó: JSFiddle

Nhược điểm duy nhất của kỹ thuật này là nó đòi hỏi một chiều rộng cố định ở phía bên phải (100 pixel, trong trường hợp này) để làm việc, nhưng đó là một thương mại nhỏ.

+0

Giải pháp tuyệt vời. Tôi đã thông báo IE7 sẽ cần một hack, mặc dù để có được dấu chấm trên cùng một dòng ... – Fred

+0

Lật vị trí của các thẻ 'span' và' a' trong mã sẽ sửa lỗi IE7 đó mà không có bất kỳ hack nào. –

+0

Khi tôi đã thử lật thứ tự, tôi đã kết thúc với các vấn đề bố trí trong FF ... – Fred

2

Giá trị hai pence của tôi là here.

Tôi đã sử dụng vị trí tương đối thay vì phao nổi và thêm phần tử giả sau các nhịp để ngăn chặn gạch dưới (?) Các liên kết nếu chiều rộng của dấu bị giảm.

Các vấn đề liên quan