有关信息列表显示的问题ul?li布局_html/css_WEB-ITnose
Jun 21, 2016 am 09:40 AMcss 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>
其次 是 样式的修改
#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;}
这样的写法会带来一个问题。那就是 在整个li的下面还是有虚线框的存在的。最好的解决办法是把这个点切成图片repeat过去 图片高度是20px 但是点的位置根据自己的需求 放在最下面或者中间。
如果我的方法对你有帮助请记得结贴。谢谢!发帖求助得到帮助后能够及时结贴也是种美德

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input?

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What is the purpose of the <meter> element?

What are the best practices for cross-browser compatibility in HTML5?

What is the purpose of the <datalist> element?

How do I use the HTML5 <meter> element to display numerical data within a range?
