欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

良多网页机关时分小一小部分布局除了应用其余标签来组织,对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.yuqseh.com.cn/wenji/w53769.shtml

重庆彩开奖号码查询结果