<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[ul::after 防止 ul li 錯亂寫法]]> apao <apao@www.apao.idv.tw> Mon, 08 Jan 2018 04:21:17 +0000 https://blog.apao.idv.tw/post// 正常來說 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>

Tags - , , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] ul::after 防止 ul li 錯亂寫法]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment