特别的表格(overflow:hidden的一个小应用)
做多个li,对各个边的边框有不同的要求,三层盒子,
第一层盒子放li,设置右边和下边的虚线边框,浮动,
第二层盒子ul设置宽度使li排列,
第三层盒子最大的盒子,使用overflow:hidden,宽度高度比ul减少几个像素。
效果如下:
没使用overflow:hidden之前
使用overflow:hidden之后
代码如下:
<div class="bottom">
<ul>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
</ul>
</div>
</body>
<style>
.bottom {
width: 1048px;
height: 156px;
overflow: hidden;
}
.bottom ul{
width: 1060px;
}
.bottom li{
float: left;
width: 210px;
height: 50px;
line-height: 50px;
list-style: none;
border-right: 1px dashed #000;
border-bottom: 1px dashed #000;
text-align: center;
}
</style>
特别的表格(overflow:hidden的一个小应用)的更多相关文章
- 关于overflow: hidden;的一个诡异问题
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 移动端浏览器body的overflow:hidden并没有什么作用
今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...
- td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器
我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- 关于overflow:hidden和bfc
在练习tab选项卡的时候遇到了设置div内部li出现了影响外层相邻div浮动的情况,早就知道overflow:hidden可以清除这种情况产生的浮动,但是为什么它可以清除呢?我们往下看: 首先看一下我 ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- 纯 css 打造一个小提示 tooltip
最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...
- 溢出overflow: hidden
如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...
随机推荐
- SpringCloudConfig相关配置简介、使用、整合Eureka
目的: 1.SpringCloud Config简介 2.Config Server基本使用 3.Config Client基本使用 4.Config整合Eureka 5.Config配置搜索路径 S ...
- Spring Cloud--服务的发布与调用示例
[Provider] 引依赖: 启动类上添加注解: 配置文件: [Consumer] 引依赖: 加注解: 配置文件: 调用服务: 方式一(动态获取服务列表): Eureka默认30秒拉取一次服务列表. ...
- Nginx惊群问题
Nginx惊群问题 "惊群"概念 所谓惊群,可以用一个简单的比喻来说明: 一群等待食物的鸽子,当饲养员扔下一粒谷物时,所有鸽子都会去争抢,但只有少数的鸽子能够抢到食物, 大部分鸽子 ...
- Unity的学习笔记(XLua的初学用法并在lua中使用unity周期函数)
自己最近也在研究怎么用lua控制UI,然后看着网上介绍,决定选用XLua,毕竟TX爸爸出的,有人维护,自己琢磨着怎么用,于是弄出来一个能用的作为记录. 当然,XLua主要是用于热更新,我自己是拿来尝试 ...
- 1.工厂模式(Factory Method)
注:图片来源于 https://www.cnblogs.com/-saligia-/p/10216752.html 工厂UML图解析: 工厂模式:client用户需要三步: 1.创建工厂: 2.生产产 ...
- JavaScript之条件语句
(1)if条件语句 // if(条件){当条件为真,存在即为真.当条件为false null 0 undefined中任意一种时,则表示不存在,不存在即为假} if(条件){ 条件为真时执行的代码 } ...
- JavaScript箭头函数中的this详解
前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log(" ...
- 逗号分隔的字符串转成表格参与IN条件查询
返回值为'1,2,3,4,5,6,7',是一个字符串,如果要用IN 查询的话sql认为这是一个完整的字符串,需要将内容分隔转换变成table 定义函数如下: create Function sysfS ...
- 【zookeeper】linux中编写脚本批量启动zookeeper
实现功能:一键启动.关闭主从端3个节点上的zookeeper,附加查看启动状态 mkdir bin --新建文件夹 cd bin 跳转到bin文件夹里 touch zookeeperstart.sh ...
- SQL SERVER-Extendevent检测TempDB增长
--创建Session收集数tempDB增长数据 CREATE EVENT SESSION [Database_Growth_Watchdog] ON SERVER ADD EVENT sqlserv ...