交互设计中心-72色

目录菜单的最终效果如上图，代码的大致布局如下图

其实大家看到这个图很清晰的就能知道他的css原理所在，下面是详细的thml及css代码
HTML

<ul>
  <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>

CSS代码

.menu {
  width: 500px;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}
.menu strong {
  background: #fff;
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}
.menu em {
  background: #fff;
  padding: 0 0 0 5px;
  font: 110%/100% Georgia, "Times New Roman", Times, serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
}
.menu sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

使用了绝对定位来使虚线放在文字的中间，当然大家也可以不需要这么麻烦，可以用背景图片来做那个虚线，那样的话就简单了，甚至可以做出更好看的样式。

li {
  background: url(images/circle.gif) repeat-x left center;
}

这样的话那些bottom，top就不需要了。只要数字flaot：right就ok了。