CSS无序列实现表宽度自适应的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS无序列实现表宽度自适应的表格_网页代码站(www.webdm.cn)</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(/images/20111223/linex.gif); zoom:1;}
li { width:20%; *width:19.9%;/*IE6&IE7的宽度有点囧*/ float:left;}
span { display:block; border-left:1px solid #cfdae8; height:24px; font-size:12px; line-height:24px; padding:0 4px;}
</style>
</head>
<body>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<br /><br />不管浏览器的窗口有多宽,它都会自适应宽度。
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
</body>
</html>
CSS无序列实现表宽度自适应的表格的更多相关文章
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- css实现右侧固定宽度,左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- 转:CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
随机推荐
- js对象(一)
1.创建对象 /*直接创建*/ var person = new Object(); person.name = "宝宝"; person.age = 3; var person2 ...
- SQL Server执行计划的理解
详细看:http://www.cnblogs.com/kissdodog/p/3160560.html 自己总结: 扫描Scan:逐行遍历数据. 查找Seek:根据查询条件,定位到索引的局部位置,然后 ...
- node npm 安装模块 淘宝镜像
npm --registry https://registry.npm.taobao.org info underscore
- 对于那本--你必须知道的499个C语言问题--总结
(1)1.3 (2)1.10没看懂 (3)1.11和1.12都讲到了 静态变量和局部变量,那么这两个是啥啊,我不懂: (4)1.13针对那两个字符串定义为啥有问题,不懂 (5)2.8是做什么的 ( ...
- DataRow[]与DataTable的转换代码【精炼】
Day_20170106 代码记录 //DataTable查询出DataRow[] DataRow[] drs = AllSysModuleDs.Tables[].Select(string.Form ...
- Palindrome Pairs
Given a list of unique words. Find all pairs of distinct indices (i, j) in the given list, so that t ...
- flash拖动条移出flash无法拖动
原因:flash拖动条的拖动事件被嵌入flash的div的鼠标事件给截获了!
- redis对比其余数据库
Redis属于常见的NoSQL数据库或者说非关系数据库:Redis不使用表,她的数据库也不会预定义或者强制去要求用户对Redis存储的不同数据进行关联. 常见数据库对比: 和高性能键值缓存服务器mem ...
- html+css 技巧
3.css定义的技巧:[1].为了将来的css代码优化,建议所有的属性上要带上“:” [2].某些html 标签,有自己默认的css属性值, 例如h1 标签就有自己的属性值,自动就是加粗显 ...
- 快捷键的记录,Word和PPT的一些常用操作
1)PPT背景设置:右键->背景->背景填充下的下拉箭头->填充效果->图片- >选择图片->确定->选择应用或应用全部 2)Word,PPT求和符号怎么打 ...