小技巧處理div內(nèi)容溢出
前幾天遇到一個(gè)問題,代碼是這樣一個(gè)層次:
<div class="province">
<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)在邊框外了。
原來需要設(shè)置ul的邊框。想想也是,先設(shè)置與他關(guān)系最近的元素吧。
對于前端不是很專業(yè)的同僚來說,寫css樣式表還是有個(gè)規(guī)則比較好:
指定css樣式要有層次:如上例,定義li的樣式 .province ul li{...}
寫樣式有個(gè)大致順序:容器大?。╳idth,height......),容器位置(left,margin......),容器文本(color......),其他
這樣盡可能避免樣式覆蓋之類的問題。
上一篇:討論CSS中的各類居中方式
欄 目:CSS/HTML
下一篇:CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
本文標(biāo)題:小技巧處理div內(nèi)容溢出
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/11511.html


閱讀排行
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5播放視頻代碼的信息
- 04-02html5chm手冊,html操作手冊
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文