Ссылка на эту скрипку: http://jsfiddle.net/exGnZ/
Привет, я пытаюсь воспроизвести оглавление с неупорядоченным списком и точками лидера.К сожалению, при наличии длинной строки содержимого форматирование нарушается.Кто-нибудь знает, как заставить главу 2 на изображении ниже отображаться в той же строке, что и точки?
Вот код, который я получил на данный момент: 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;
}