Question

div+css中li的一个问题

我想做一个杂志目录的，大概样式是：
中国人,你健康吗? ----------------------------------（1）
让飞机自动飞行 ------------------------------------（2）
“卡西尼”号的土星之旅 ----------------------------（3）

是用li写的，但是标题字数不确定，中间的----虚线应该怎么添加呢？

Answer 1

1、先制作一个高为1px宽为4px的图片，左边2px填充黑色，右边2px填充白色，或者透明。

2、然后将这张小图当作li的背景图，x轴重复（repeat-x），上下左右居中。

3、再给标签a添加背景颜色为白色。

参考代码如下：

<style>

*{margin:0;padding:0;}

ul{width:600px;margin:20px;}

li{list-style:none;height:25px;background:url(https://iknow-pic.cdn.bcebos.com/eaf81a4cc3df1dbed62afc7c?x-bce-process=image/quality,q_85) center center repeat-x;}

li span{float:right;background:#fff;}

a{display:inline-block;height:25px;line-height:25px;background:#fff;color:#000;text-decoration:none;}

</style>

<ul>

<li><span>（1）</span><a href="#">中国人,你健康吗? </a></li>

<li><span>（2）</span><a href="#">让飞机自动飞行 </a></li>

<li><span>（3）</span><a href="#">卡西尼号的土星之旅</a></li>

<li><span>（4）</span><a href="#">这是更多的文字这是更多的文字这是更多的文字这是更多的文字</a></li>

</ul>