小技巧处理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 ...
随机推荐
- css3实现jquery mobile的页面过度原理
1.两个页面在同一个html中用js点击实现另外一个页面增加ui-page-active slid in等各种效果,每个页面中是一个绝对定位 .ui-mobile [data-role=page] { ...
- Log4php 使用心得
使用log4php 记录系统日志: 1.自动拦截php报出的错误,写日志 2.手动打印错误 set_error_handler('captureNormal',E_ERROR | E_PARSE); ...
- Java面试知识1
JAVA面试题集 基础知识: 1.C++或Java中的异常处理机制的简单原理和应用. 当JAVA程序违反了JAVA的语义规则时,JAVA虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- Pro mvvm读书笔记mvvm中的VM
一.构建ViewModels 设计模式的其中一个目标就是抽象构造一个给出指定类型的对象或者实现指定类型的接口的过程.需要把类给客户端,让客户端去使用,但是要隐藏类是具体的实现细节. 1.1The Ap ...
- linux 中的进程wait()和waitpid函数,僵尸进程详解,以及利用这两个函数解决进程同步问题
转载自:http://blog.sina.com.cn/s/blog_7776b9d3010144f9.html 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / wait ...
- HTML——动画效果:图片循环横向播放
一.html <!DOCTYPE HTML> <html> <head> <title>Home</title> <link href ...
- kafka+storm+hbase
kafka+storm+hbase实现计算WordCount. (1)表名:wc (2)列族:result (3)RowKey:word (4)Field:count 1.解决: (1)第一步:首先准 ...
- WPF教程六:布局之Grid面板
Grid:网格面板 Grid顾名思义就是“网格”,以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列. Grid和其他各个Panel比较起来,功 ...
- 上手并过渡到PHP7(5)——轻量级“集合”迭代器-Generator
轻量级“集合”迭代器-Generator泊学视频链接泊阅文档链接Generator是PHP 5.5加入的新语言特性.但是,它似乎并没有被很多PHP开发者广泛采用.因此,在我们了解PHP 7对Gener ...