歡迎來到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.hjkjtws.com.cn/wenji/w53769.shtml

时时彩内部管理计划群 北京体彩快中彩号码统计器 5分快3网站 天津时时彩计划手机版 腾讯分分彩官网首选 850有多少人输了 粤广东十一选五走势 七星彩走势综合图 青海11选五规则 2019年王中王平特一肖 福州麻将有啥技巧 江苏11选5遗漏一定牛 老虎配资 陕西快乐10分官网 西甲最新排名 至尊棋牌三公官方下载 山西十一选五前3遗漏