January 8, 2018
正常來說 HTML裡面，如果使用 li 做 float 功能時，就會讓 li 失去高度，為了不讓 li 失去高度，以及在之後的元素不會錯亂，需要有對應的程式寫法，如下：
HTML 一般寫法
就會變成這樣：（灰框：div, 藍框：ul, 紅框：li）
要正常，就要多寫一行div style -> clear: both 在每個 ul 後面，但是對輸出程式而言有點不乾淨。
所以在CSS裡用 ul::after 來防制 float: 所產生的錯亂對輸出會乾淨一些。
CSS style
正常畫面如下
CSS style 參考
HTML 參考
HTML 一般寫法
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
<ul>
<li>★</li>
<li>this is list comm.</li>
</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;">
<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*/
}
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;}
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>
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
</div>
Sticky Navigatio
手機版 nav line-hei
0 Comment(s)
