良多網頁機關時分小一小部分布局除了應用其余標簽來組織，對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.rs2pl.com/wenji/w53769.shtml
