Heim > Web-Frontend > HTML-Tutorial > 有关信息列表显示的问题ul?li布局_html/css_WEB-ITnose

有关信息列表显示的问题ul?li布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:40:41
Original
964 Leute haben es durchsucht

css list

css:
#raider_list a{ text-decoration:none; font-family:"宋体"; font-size:12px; color:#930}
#raider_list a:hover{ text-decoration:underline; font-family:"宋体"; font-size:12px; color:#930}
#raider_list ul{ list-style:none outside none;}
#raider_list ul li{ line-height:26px;}
-------------------------------------------------------------------------

 

------------------------------
标题的长短会不一样,能否让后面的点点自动填充满与标题和日期之前呢。
效果

回复讨论(解决方案)

考虑 用js作或者后台做吧 ,毕竟 css只是 表现性的东西 

我很负责任的告诉你 能。
首先需要更改的是ul里面的 li的结构

<li><a href=""><< 1.第一个信息</a><span>2013-01-06</span></li>
Nach dem Login kopieren

其次 是 样式的修改
#raider_list li{border-bottom:dotted 1px #999;height:20px;}#raider_list li a{background:#fff;display:block;float:left;line-height:20px;}#raider_list li span{background:#fff;display:block;float:right;line-height:20px;}
Nach dem Login kopieren

这样的写法会带来一个问题。那就是 在整个li的下面还是有虚线框的存在的。最好的解决办法是把这个点切成图片repeat过去 图片高度是20px 但是点的位置根据自己的需求 放在最下面或者中间。
如果我的方法对你有帮助请记得结贴。谢谢!发帖求助得到帮助后能够及时结贴也是种美德

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage