span具有小局部布局作用

良多网页机关时分小一小部分布局除了应用其余标签来组织，对span标签决议使用也是不错选择。这里CSS5举一个小实例简介span组织小构造运用。

例如文章题目列表中，左边为问题，右边为对应颁布发表时间，造成摆布结构的机关，何等小一小部分假设决定div构造就大材小用了。

1）、span浸染实例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>span 实例 CSS5</title> 
<style> 
ul,li{ padding:0; margin:0;list-style:none; } 
ul{ width:400px; padding:10px;border:1px solid #000} 
ul li{ line-height:30px; height:30px; text-align:left} 
ul li a{ float:left; width:300px; height:30px; overflow:hidden} 
ul li span{ float:right} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">文章问题表现</a><span>2016-09-11</span></li> 
<li><a href="#">接待会见CSS5web</a><span>2016-05-07</span></li> 
</ul> 
</body> 
</html>

代码疏解：

ul,li{ padding:0; margin:0;list-style:none; }

肯定ul和li默认CSS格局，比喻li后背间隔与无序圆点功效

ul{ width:400px; padding:10px;border:1px solid #000}

便于观测功效对ul配置宽度与边框，设置padding防备模式与Ul太紧贴。

ul li{ line-height:30px; height:30px; text-align:left}

配置Li高度，和内容垂直居中，设置形式靠左浮现

ul li a{ float:left; width:300px; height:30px; overflow:hidden}

对li里的li a设置靠左浮动，设置装备摆设宽度与高度，以及设置装备摆设匿伏横跨宽度高度的内容。防备形式溢出

ul li span{ float:right}

对span设置装备摆设靠右浮动

这样完成了文章列表结构中，标题问题靠左，年光靠右。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w53769.shtml