网络编程 
首页 > 网络编程 > 浏览文章

小技巧处理div内容溢出

(编辑:jimmy 日期: 2024/9/21 浏览:3 次 )

前几天遇到一个问题,代码是这样一个层次:

复制代码 代码如下:
<div class="province">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

我设置了div的边框,

要想ul的内容在边框内,

必须设置div高度。

但是,ul内的内容是变化的,内容少的时候就不及div的高度。

不设高度的时候,ul的内容就出现在边框外了。

原来需要设置ul的边框。想想也是,先设置与他关系最近的元素吧。

对于前端不是很专业的同僚来说,写css样式表还是有个规则比较好:

指定css样式要有层次:如上例,定义li的样式 .province ul li{...}

写样式有个大致顺序:容器大小(width,height......),容器位置(left,margin......),容器文本(color......),其他

这样尽可能避免样式覆盖之类的问题。

上一篇:html小技巧之td,div标签里内容不换行
下一篇:ie6,ie7,ie8完美支持position:fixed的终极解决方案
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap