关于Html无宽度居中
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{font-size: 12px;background: ;}
ul{margin: 0;padding: 0;list-style: none; clear:both; position: relative;float:left; left: 50% }
li{float: left;display: inline;position: relative;left: -50%;margin: 5px 0}
.wrapper a{display: block;height: 20px;width: 20px;text-decoration: none;text-align: center;line-height: 20px;color: #fff;background: blue;float: left;margin: 0 5px;}
</style>
</head>
<body>
<div class="wrapper">
<ul><li><a href="#">1</a> </li></ul>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li></ul>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
效果:
关于Html无宽度居中的更多相关文章
- [css] 页面重构“鑫三无准则” 之“无宽度”准则
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 一 ...
- MFC 根据字符宽度居中
Gdiplus::Font font(_T("微软雅黑"), (Gdiplus::REAL)130); Gdiplus::RectF orgin(0.0f, 100.0f, nWi ...
- js高度line-height及宽度text-align:center居中插件
1.高度居中---在高度设为100%,无法直接使用line-height:100%;会不起效果 这是用于应对height:100%的插件 /** * 高度居中函数,用于应对高度设为100%时的居中 * ...
- fscanf_s与scanf_s的宽度参数与缓冲区参数分析
fscanf_s函数 在文件操作中经常会用到fscanf这个函数,但是在VC和VS中会有警告 意思是编译器觉得fscanf不安全,叫你考虑用一下fscanf_s这个函数来代替fscanf,fscanf ...
- CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...
- CSS流体(自适应)布局下宽度分离原则——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...
- shrink-to-fit(自适应宽度)
自适应宽度是指当未明白设定容器的宽度(或外边距设为auto)时,在特定的情况下容器的宽度会依据情况自行设定.而设定的结果往往并非我们想要的. W3C规范中描写叙述了几种shrink-to-fit的情况 ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- LODOP表格水平居中3(宽度为百分比)
如果一个表格在css样式等中设置了固定的宽度,想要实现表格在纸张中水平居中,可根据固定的宽度设置合适的左边距,如果打印项内容在打印项宽度中居中,可以设置打印项在纸张中居中.方法1:宽度固定,纸张大小固 ...
随机推荐
- PHP中使用函数array_merge()合并数组
如果明白数组其实就是map的话,我想你就会明白array_merge为什么要这么实现了 PHP中合并数组分成两种情况 1.如果这两个数组中有相同的字符串键名: <?php header('Con ...
- hdoj 2502 月之数
月之数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- dp hdu-4433 locker
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4433 题目大意: 给两个长度相等的数字串s1,s2.每次操作可以把连续的最多三位都+1或-1,如果超 ...
- typeof和instanceof 运算符
instanceof运算符与typeof运算符相似,用于识别正在处理的对象的类型,但是在使用 typeof 运算符时采用引用类型存储值会出现一个问题. 无论引用的是什么类型的对象,它都返回 " ...
- Java-工厂设计模式
引言: 工厂设计模式分为三种: 简单工厂 工厂方法 抽象工厂 联想四种情况 (1).还没有工厂时代:假如还没有工业革命,如果一个客户要一件产品,一般的做法是客户去创建一件产品,然后拿来用. (2).简 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
- PAT---1013. Battle Over Cities (25)
这道题目的意思是:在战争时代,如果一个城市被敌人占领了,那么和该城市相连的道路都必须关闭,我们必须把剩下的城市(即不包括被敌人占领的城市)连接起来. 举个例子,我们有3个城市,C1,C2,C3,C1和 ...
- W5500问题集锦(持续更新中)
在"WIZnet杯"以太网技术竞赛中,有非常多參赛者在使用中对W5500有各种各样的疑问,对于这款WIZnet新推出的以太网芯片,使用中大家是不是也一样存在下面问题呢?来看一看: ...
- MetaData Lock 杨奇龙 ---MYSQL博客专家
http://blog.itpub.net/22664653/viewspace-1791608/ http://blog.csdn.net/dba_waterbin/article/details/ ...
- ubuntu下linux内核源码阅读工具和调试方法总结
http://blog.chinaunix.net/uid-20940095-id-66148.html 一 linux内核源码阅读工具 windows下当然首选source insight, 但是l ...