Html 将无序列表转换为目录
参考这把小提琴: 嗨,我正试图复制一个目录,其中有一个无序的列表和前导点。不幸的是,当内容排得很长时,格式就会崩溃。有人知道如何让下图中的第2章与点出现在同一条线上吗 以下是我目前掌握的代码: 我还将其粘贴到这里:Html 将无序列表转换为目录,html,css,html-lists,tableofcontents,Html,Css,Html Lists,Tableofcontents,参考这把小提琴: 嗨,我正试图复制一个目录,其中有一个无序的列表和前导点。不幸的是,当内容排得很长时,格式就会崩溃。有人知道如何让下图中的第2章与点出现在同一条线上吗 以下是我目前掌握的代码: 我还将其粘贴到这里: <div> <ul id="toc"> <li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<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>
这是我的破绽:
这项技术唯一的缺点是,它需要在右侧有一个固定的宽度(在本例中为100像素)才能工作,但这是一个小的折衷。这样如何:
在我所拥有的时间里,我能做到的最好。我的两便士值多少钱
我使用了相对定位而不是浮动,并在跨距后添加了一个伪元素,以防止在ul宽度减小的情况下覆盖(?)链接。很好的解决方案。我确实注意到IE7需要一个破解,尽管要在同一行上获得点…翻转
span
和a
标记在代码中的位置可以修复IE7漏洞,而不需要任何破解。很好的解决方案。我希望我能改变的唯一一件事是不要在左边的文本上加下划线,但我认为这是我们在当前浏览器中所能做到的最接近的。。。选择这个作为答案,我注意到了。如果我有更多的时间,我肯定我能想出一些办法。不过现在有点忙。如果我有什么想法,我会稍后发回。嘿,一个额外的跨度(不是块级)解决了这个问题。一个内联块跨度将设置宽度,一个(非块级跨度)可用于设置背景白色。谢谢你的帮助!
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;
}