goTOP
January 8, 2018

ul::after 防止 ul li 錯亂寫法

| |
網頁語言 » CSS | 閱覽(2525) | Posted by apao at 12:21
正常來說 HTML裡面,如果使用 li 做 float 功能時,就會讓 li 失去高度,為了不讓 li 失去高度,以及在之後的元素不會錯亂,需要有對應的程式寫法,如下:
HTML 一般寫法
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>

就會變成這樣:(灰框:div, 藍框:ul, 紅框:li)點擊在新視窗中瀏覽此圖片
要正常,就要多寫一行div style -> clear: both 在每個 ul 後面,但是對輸出程式而言有點不乾淨。
<ul>...</ul>
<div style="clear: both;">

所以在CSS裡用 ul::after 來防制 float: 所產生的錯亂對輸出會乾淨一些。
CSS style
ul::after{
content: "."; /*輸出文字*/
color: rgba(255,255,255,0.00); /*文字是透明的*/
clear: both; /*清除以上float規則*/
display: block; /*產生float功能所喪失的物件高度*/
height: 0px;/*再將content: 高度設定為0*/
}

正常畫面如下點擊在新視窗中瀏覽此圖片
CSS style 參考
body{ background: #FFFFFF; color: rgba(0,0,0,1.00); font-size: 13px;}
div{ width: auto; height: auto; margin:0; padding:10px 0 10px 10px; border: rgba(0,0,0,1.00) dotted 1px;}
ul{ display: block; list-style: none; margin: 0 0 10px 0; padding: 6px; border: rgba(0,0,255,1.00) dotted 1px;}
ul::after{ content: "."; color: rgba(255,255,255,0.00); clear: both; display: block; height: 0px;}
li{ float: left; display: block; width: auto; margin: 6px; padding: 0; min-height: 20px; border: rgba(255,0,0,1.00) dotted 1px;}
li:first-child{ width: 12px;}
li:last-child{ width: 92%;}
a{display:inline-block;}

HTML 參考
<div>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
</div>
Facebook twitter LINEk
文章来自: 本站原創
Tags: , , , ,
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我