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

<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. 在windows下codeblocks中配置pthread库

    转自:http://blog.csdn.net/u013172314/article/details/50846198 如果添加方法不正确,可能会出现pthread_create’未定义的引用,所以下 ...

  2. Vmware-虚拟机中ubuntu不能联网问题的解决——NAT方式

    设置虚拟机不能联网是很痛苦的,这里我就ubuntu的NAT上网问题就个人经验讲一下,其他的桥连接等没有使用就没有经验了. 1.查看/设置下NAT的网络 打开VMware Workstation, 点击 ...

  3. Maven-7:Maven配置编译的字符集方法

    http://blog.csdn.net/jsjszg/article/details/9237189 ************************************************ ...

  4. js队列的实现问题

    所谓队列就是排队的序列问题,有出有进,比如在银行排队办理业务,一般都是前一个办理完成后下一个自动进入队列 <script>  /* * 模拟队列 */ var Qu ={}; //构造函数 ...

  5. java 多线程10:synchronized锁机制 之 锁定类静态方法 和锁定类.Class 和 数据String的常量池特性

    同步静态方法 synchronized还可以应用在静态方法上,如果这么写,则代表的是对当前.java文件对应的Class类加锁.看一下例子,注意一下printC()并不是一个静态方法: public ...

  6. QQ自动发送+@好友功能+tencent://功能

    1.取出全部标题 D2007版本 procedure TForm1.Button1Click(Sender: TObject);var  hCurrentWindow:HWnd;  szText: a ...

  7. ID、Class和标签选择器优先级

    按一般论:ID > Class > 标签 1.如以下样式: <div id="id" class="class">选择器优先权</ ...

  8. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. 一款基于jquery的手风琴显示详情

    今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div al ...

  10. Android开发系列(十七):读取assets文件夹下的数据库文件

    在做Android应用的时候,不可避免要用到数据库.可是当我们把应用的apk部署到真机上的时候,已经创建好的数据库及其里边的数据是不能随着apk一起安装到真机上的. (PS:这篇博客攻克了我前面博客中 ...