divcss中如何让li和span标签的⽇期在右侧显⽰，解决的⽅法  在⽹上了⼀下，⼀共有三种⽅法，这⾥简单的记录⼀下，希望对，遇到这样问题的新⼿朋友有所帮助，同时也算是⾃⼰学习div css的有⼀定经验，分享给⼤家啊！
⽅法⼀：标签a加左浮动,span加右浮动
这个⽅法应该⽐较简单，并且对于像我这样的新⼿⼀看就懂，⼤概样式就是  <li><a >内容</a> <span
>时间</span></li>
html span 居中⽅法⼆：使⽤IE hack 在span标签中加⼊只有IE6,7可以识别的样式<；这个没有⽤过>
*margin-top:20px;
_margin-top:20px;
说明，使换⾏的部分根据margin-top再呈现出来.
也曾看到过有⽹友通过在span的⽗类中设置相对定位，然后通过为span设置绝对定位和右浮动实现.有兴趣的朋友可以看下.
li {position:relative; width:200px;}
li span{position:absolute; right:0px;}
⽅法三：span和a标签交换位置
<li><span>2012</span><a>新闻</a></li>
缺点：语义结构发⽣改变，不合逻辑.
代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>css教程 li span⽇期靠右排列实例</title>
<style>
.artlist{height:100%; overflow:hidden; margin:10px;}
.artlist ul{ margin:0px;}
.artlist ul li{ list-style:none;line-height:28px;}
.artlist ul li span{ float:right;padding-right:10px;}
.artlist ul li a{ color:#333;}
</style>
</head>
<body>
<table width="98%" border="0" class="artbody">
<tr>
<td >
<div class="artlist">
<ul>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
<li><span>2011-03-22</span><a href="a">fdafjdsaklfjdaklfdjalkf;djakfl;dsajfk</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。