文章詳情頁(yè)
小技巧處理div內(nèi)容溢出
瀏覽:313日期:2022-06-02 14:33:08
前幾天遇到一個(gè)問題,代碼是這樣一個(gè)層次:
復(fù)制代碼 代碼如下:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
我設(shè)置了div的邊框,
要想ul的內(nèi)容在邊框內(nèi),
必須設(shè)置div高度。
但是,ul內(nèi)的內(nèi)容是變化的,內(nèi)容少的時(shí)候就不及div的高度。
不設(shè)高度的時(shí)候,ul的內(nèi)容就出現(xiàn)在邊框外了。
原來(lái)需要設(shè)置ul的邊框。想想也是,先設(shè)置與他關(guān)系最近的元素吧。
對(duì)于前端不是很專業(yè)的同僚來(lái)說(shuō),寫css樣式表還是有個(gè)規(guī)則比較好:
指定css樣式要有層次:如上例,定義li的樣式 .province ul li{...}
寫樣式有個(gè)大致順序:容器大小(width,height......),容器位置(left,margin......),容器文本(color......),其他
這樣盡可能避免樣式覆蓋之類的問題。
相關(guān)文章:
1. docker啟動(dòng)ES內(nèi)存溢出的解決方案2. 用css截取字符的幾種方法詳解(css排版隱藏溢出文本)3. CSS將div內(nèi)容垂直居中案例總結(jié)4. 淺談python opencv對(duì)圖像顏色通道進(jìn)行加減操作溢出5. 不要在HTML中濫用div6. html小技巧之td,div標(biāo)簽里內(nèi)容不換行7. 父div高度不能自適應(yīng)子div高度的解決方案8. python防止棧溢出的實(shí)例講解9. JAVA 內(nèi)存溢出案例匯總10. vue實(shí)現(xiàn)給div綁定keyup的enter事件
排行榜

網(wǎng)公網(wǎng)安備