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

<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. [na]锐起无盘机并发部署多台windows

    小时候很好奇这个技术,也并无卵,只是为了遂儿时愿, 用到锐起无盘部署,支持win7哦: 视频教程: 拓展:网吧电脑为什么没有硬盘? 网吧电脑没有硬盘是怎么运行的? 所需软件: https://yunp ...

  2. gnome3增加自定义程序快捷方式

    gnome3增加自定义程序快捷方式   1. 安装alacarte   在命令行输入下列命令安装alacarte程序   yum -y install alacarte   安装完毕后,在命令行输入下 ...

  3. feignclient设置hystrix参数

    序 feign默认集成了hystrix,那么问题来了,如何像hystrix command那样设置每个方法的hystrix属性呢. 实例 @FeignClient("product" ...

  4. Ubuntu和Busybox下用make menuconfig配置出错解决

    http://blog.csdn.net/satiling/article/details/6965985 # make menuconfig In file included from script ...

  5. 【转】Mysql两种存储引擎的异同【MyISAM和InnoDB】

    MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度,所以 ...

  6. C#中http请求下载的常用方式demo

    //通过webClient方式 WebClient client = new WebClient(); string url="http://down6.3987.com:801/2010/ ...

  7. Makefile学习之路——2

    让你的makefile更专业. 在上一个Makefile所在目录下通过touch命令创建一个clean文件,执行make clean,将发现make总是提示clean文件是最新的,而不是按我们期望的那 ...

  8. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  9. Head First 设计模式读书笔记(1)-策略模式

    一.策略模式的定义 策略模式定义了算法族,分别封装起来,让它们之间可以互换替换,此模式让算法的变化独立使用算法的客户. 二.使用策略模式的一个例子 2.1引出问题 某公司做了一套模拟鸭子的游戏:该游戏 ...

  10. 【转】【Unity】DateTime各种时间字符串

    各种表示时间的方法 谢谢网络上的大神 此片为转载的文章 DateTime.Now.ToShortTimeString() DateTime dt = DateTime.Now; dt.ToString ...