小技巧处理div内容溢出
前几天遇到一个问题,代码是这样一个层次:
<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内容溢出的更多相关文章
- div内容溢出
前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li ...
- div内容溢出时显示滚动条
在style中添加overflow:scroll属性即可.
- html/css/js小技巧实例
一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...
- window.open的小技巧分享
今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明. 聊到window.open,不得不说明一下他的使用方法,主要有两种形式: win ...
- window.open的小技巧分享(转)
今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明. 聊到window.open,不得不说明一下他的使用方法,主要有两种形式: window. ...
- DIV内容超出固定宽度部分用省略号代替
方法一:CSS控制溢出文本 只针对DIV单行数据展示 /** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/ .textAuto{overflow:hidden;text-overfl ...
- PHP开发者该知道的5个Composer小技巧
Composer 是新一代的PHP依赖管理工具.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方便. 1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单 co ...
- 小技巧!CSS 整块文本溢出省略特性探究
今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...
- 解决 SharePoint 2010 拒绝访问爬网内容源错误的小技巧(禁用环回请求的两种方式)
这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个ShareP ...
随机推荐
- 【Android】3.23 示例23--瓦片图功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 地图SDK自v3.6.0起,新增瓦片图层(tileOverlay), 该图层支持开发者添加自有瓦片数 ...
- 【转】服务器添加新用户用ssh-key 登录,并禁用root用户 密码登录
[转]Linux最高权限用户root,默认可以直接登录sshd.为了提高服务器的安全度,需要对它进行禁止,使得攻击者无法通过暴力破解来获取root权限. ps: 以下内容皆非原创,只是个人的一个实践 ...
- 编写Spark的WordCount程序并提交到集群运行[含scala和java两个版本]
编写Spark的WordCount程序并提交到集群运行[含scala和java两个版本] 1. 开发环境 Jdk 1.7.0_72 Maven 3.2.1 Scala 2.10.6 Spark 1.6 ...
- CentOS 7 开放防火墙端口 命令
iptables防火墙 1.基本操作 # 查看防火墙状态 service iptables status # 停止防火墙 service iptables stop # 启动防火墙 servi ...
- 【C#/WPF】Bitmap、BitmapImage、ImageSource 、byte[]转换问题
C#/WPF项目中,用到图像相关的功能时,涉及到多种图像数据类型的相互转换问题,这里做了个整理.包含的内容如下: Bitmap和BitmapImage相互转换. RenderTargetBitmap ...
- Java并发(四)多线程开销
从单线程应用转变为多线程应用并不只是带来好处.这种转变也会带来一定得开销得.并不是所有时候都要把你的应用编程多线程的.你应该明白这样做确实会带来好处,而且这种好处要比开销大.如果你不确定的话,要试着去 ...
- 解析:SO_REUSEADDR bind: address in use
http://blog.sina.com.cn/s/blog_53a2ecbf010095db.html socket中的SO_REUSEADDR Q: 我正在写一个unix server程序,不是d ...
- php7+apache2.4 安装(window)
一.下载 需要下载 php7.apache2.4.vc2015(VC库) PHP7下载地址:http://windows.php.net/download/ Apache 下载地址:https://h ...
- JavaScrip——练习(做悬浮框进一步:悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iscsi线缆