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

<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......),其他

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

小技巧处理div内容溢出的更多相关文章

  1. div内容溢出

    前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li ...

  2. div内容溢出时显示滚动条

    在style中添加overflow:scroll属性即可.

  3. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  4. window.open的小技巧分享

        今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明.       聊到window.open,不得不说明一下他的使用方法,主要有两种形式:   win ...

  5. window.open的小技巧分享(转)

    今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明.       聊到window.open,不得不说明一下他的使用方法,主要有两种形式:   window. ...

  6. DIV内容超出固定宽度部分用省略号代替

    方法一:CSS控制溢出文本  只针对DIV单行数据展示 /** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/ .textAuto{overflow:hidden;text-overfl ...

  7. PHP开发者该知道的5个Composer小技巧

    Composer 是新一代的PHP依赖管理工具.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方便. 1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单 co ...

  8. 小技巧!CSS 整块文本溢出省略特性探究

    今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...

  9. 解决 SharePoint 2010 拒绝访问爬网内容源错误的小技巧(禁用环回请求的两种方式)

    这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个ShareP ...

随机推荐

  1. Date函数基础知识整理

    Date类型:1.Date.parse()接收一个表示日期的字符串参数,然后再根据这个字符串返回响应的日期的毫秒数:如:创建一个日期: <script> // var someDate=n ...

  2. 如何保证RabbitMQ的消息不丢失及其背后的原理

    一.消息为什么丢失 RabbitMQ默认情况下的交换机和队列以及消息是非持久化的,也就是说在服务器重启或者宕机恢复后,之前创建的交换机和队列都将不复存在,之前未消费的消息也就消失不见了.原因在于每个队 ...

  3. web-project的/WEB-INF/lib

    哪些jar包应该放到你的/WEB-INF/lib中?(目前为止,我的classpath只配置了dt.jar和tools.jar,也就是说,我的web-project所用的所有jar包都没有配置到cla ...

  4. 使用supervisor过程中的一个问题

    我有一个php写的脚本需要常驻内存,于是使用supervisor进行管理,后来由于进程运行时间长了以后会出现假死的情况,所以就改成进程在无事可做的时候就退出,然后让supervisor再拉起来,起到重 ...

  5. 混合编程:error LNK2001: unresolved external symbol

    Vs2006+matlab2010rb环境: 1:工具-选项-项目解决方案-VC++目录设置include和lib的路径 2:项目-属性-属性配置-链接器-输入-附加依赖项把库的名字添加进去 VIST ...

  6. Clock函数用法

    clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下: clock_t clock(void) ; 这个函数返回从“开启这个程序进程 ...

  7. 【WPF】当 ItemsSource 正在使用时操作无效。改用 ItemsControl.ItemsSource 访问和修改元素

    问题: 中文版报错:Additional information: 当 ItemsSource 正在使用时操作无效.改用 ItemsControl.ItemsSource 访问和修改元素. 英文版报错 ...

  8. 【WPF】Button按钮添加背景图片

    只是想做一个很简单的图片按钮而已,不需要那么复杂. <Button x:Name="btn" Width="145" Height="30&qu ...

  9. 【C#】往异步下载的方法传递自定义完成事件

    封装自定义的异步下载方法时,正常情况下是这样的: /// <summary> /// 异步方法:联网下载文件,保存到本地. /// </summary> /// <par ...

  10. C++实现通讯信息管理系统

    通讯信息管理系统 可以实现通讯信息的增加,浏览,删除,修改,查询,保存和读取功能.该系统还限制了通讯信息的条数(limit变量来限制) 文件放置结构: 具体实现代码如下: #include<io ...