将无序列表转换为目录
参考这个小提琴：http://jsfiddle.net/exGnZ/
嗨，我正在尝试重现带有无序列表和前导点的目录。不幸的是，当内容很长时，格式就会崩溃。有谁知道如何让下图中的第二章与点出现在同一行？
这是我目前得到的代码： http://jsfiddle.net/exGnZ/
我也将其粘贴在这里：
<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>
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;
}
Reference this fiddle: http://jsfiddle.net/exGnZ/
Hi, I'm trying to reproduce a table of contents with an unordered list and leader dots. Unfortunately, when there's a long line of content, the formatting breaks down. Does anyone know how to get Chapter 2 in the image below to appear on the same line as the dots?
Here's the code I've got at the moment:
http://jsfiddle.net/exGnZ/
I'm also pasting it here:
<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>
And the 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
怎么样： http://jsfiddle.net/exGnZ/40/
我可以在我有时间。
How about this: http://jsfiddle.net/exGnZ/40/
Best I could manage in the time I had.
这是我的破解： JSFiddle
这种技术的唯一缺点是它需要固定的宽度来右侧（在本例中为 100 像素）可以工作，但这是一个较小的权衡。
Here is my crack at it: JSFiddle
The only downside of this technique is that it requires a fixed width to the right side (100 pixels, in this case) to work, but it's a minor trade-off.
我的两便士价值在这里。
我使用相对定位而不是浮动，并在跨度后添加了一个伪元素，以防止在 ul 宽度减小时重叠（？）链接。
My two pence worth is here.
I used relative positioning instead of floats and added a pseudo element after the spans to prevent underlapping(?) the links if the width of the ul is reduced.