良多網頁機關時分小一小部分布局除了應用其余標簽來組織,對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