Question

css 自适应问题

像上面的图，我想在标题和日期之间加上类似目录的虚线，
并且左边的标题长度是不一定的，
有没有办法自动适应之间的宽度，然后加上垂直居中的虚线？
BORDER-BOTTOM: #828282 1px dotted;是加在底部的。
请大神指点，最好能附上修改代码。
这个栏目宽度为300px。

附上原始HTML代码：
<div id="p997_list_1" style="display:block">
<ul class="list_14 clear">
<li><a href='#' target="_blank">第23周工作动态</a><SPAN>[08-14]</SPAN></li>
<li><a href='#' target="_blank">第22周工作动态</a><SPAN>[08-07]</SPAN></li>
<li><a href='#' target="_blank">第21周工作动态</a><SPAN>[07-31]</SPAN></li>
<li><a href='#' target="_blank">第20周工作动态</a><SPAN>[07-24]</SPAN></li>
<li><a href='#' target="_blank">第19周工作动态</a><SPAN>[07-17]</SPAN></li>
<li><a href='#' target="_blank">第18周工作动态</a><SPAN>[07-10]</SPAN></li>
<li><a href='#' target="_blank">第17周工作动态</a><SPAN>[07-03]</SPAN></li>
<li><a href='#' target="_blank">第16周工作动态</a><SPAN>[06-26]</SPAN></li>
<li><a href='#' target="_blank">第15周工作动态</a><SPAN>[06-19]</SPAN></li>
</ul>
</div>

原始CSS代码：
.list_14 li{ background:url(img/dot.gif) no-repeat 5px 13px; padding-left:12px;font-size:14px; line-height:30px;}
.list_14 li span {LINE-HEIGHT: 30px; FLOAT: right; COLOR: #b0b0b0; FONT-SIZE: 14px; FONT-WEIGHT: normal;}

最好同时兼容IE6。

Answer 1

我给你说，你自己调试吧好吗？

你如果要设置自适应的问题，那么就需要一个宽度100%也就是你最外围的那个div 设置css宽度100%；
第二步，设置li标签宽度60%；后面的span修改为li设置为40%；给他们都起一个css名字首先保证一行自适应，以下的那些复制就可以了；让li标签 float:left 或者让第二个li标签靠右对齐；
这样就可以实现区域自适应了；

注：这只是区域自适应，你也可以设置由浏览器的宽度变动，文字根据浏览器宽度变化而变动大小，这个就需要去判断了@media screen用这个方法就可以实现，如果不懂可以百度一下，有对应的教程，或者追问我也可以；我可以帮你解答；