让横向ul在页面中水平居中的方法
在导航的布局中,导航条会用横向布局的ul li.如果要让其居中,怎么办呢?
第一种方法:
ul{text-align:center;}
li{display:inline}
这种方法不适合ie低版本。因为这种方法会让ie默认让所有元素居中。
第二种方法:
用一个div把ul包起来,<div id="wrap"></div>
#wrap{float:left;position:relative;left:50%;}
ul{position:relative;left:-50%;}
这种方法首先把父级元素浮动起来,让子元素的内容撑开宽度,这样父元素和子元素的宽度就是一致的
然后让父元素的最左边与body(假设body就是最外边的元素)的中线对齐,同时相当于ul的左边也与body的中线对齐了
然后再把ul的左侧向左移动50%(wrap的宽度与ul的一致),即可居中
让横向ul在页面中水平居中的方法的更多相关文章
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
- 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例
juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...
- Javscript调用iframe框架页面中函数的方法
Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...
- valuestack,stackContext,ActionContext.之间的关系以及action的数据在页面中取得的方法
转自:http://blog.csdn.net/quechao123/article/details/4406148 1.三者之间的关系如下图所示: 2.action的数据在页面中取得的方法 在st ...
- 让rdlc报表在ReportViewer中水平居中的方法
正常情况下,rdlc报表在Reportviewer中是居左显示的,如图: 在Reporviewer的属性中,我没有找到能让rdlc的居中显示的方法.网上其他人用的方法都试了,没能实现,只能自己找方法解 ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
随机推荐
- 亲身体验:digitalocean vps能做的10件事
我写过一篇亲身体验:digitalocean和linode评测哪个好,帮助不少网友选购价格便宜性能优异的免备案vps,相信大家对两家产品有所了解.vps的性能和用途远远超过传统的虚拟主机,你拥有独立I ...
- Gentoo安装详解(四)-- 声卡设置
硬件检测 To choose the right driver, first detect the used audio controller. You can use lspci for this ...
- javascript动画效果之缓冲动画
这里的html和css的代码是复制之前的随便匀速运动的,所以不需要改变 <!DOCTYPE html> <html> <head> <meta charset ...
- 斯坦福大学公开课:iOS 7应用开发 笔记
2015-07-06 第一讲 课务.iOS概述 -------------------------------------------------- 开始学习斯坦福大学公开课:iOS 7应用开发留 ...
- 富文本ckediter
##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascript" ...
- js常用API 数据类型 基本类型,基本包装类型,引用类型 Object String Array Boolean Number Date Math
数据类型 变量.作用域及内存 基础类型(primitive value):Undefined.Null.Boolean.Number和String.这些类型在内存中分别占用固定大小的空间,他们的值保存 ...
- 数组按时间(字符串->Date)排序
不说了 ,直接上代码.Talk is cheap , show me the code. NSArray *stortedArray = [wkSelf.dataArray sortedArrayUs ...
- 小飞淙在博客上的第一天——NOIP201505转圈游戏
原本我是在word文档上写这种东西的,在杨老师的“强迫”下,我开始写了博客. 这是我在博客上的第一天,就先来个简单的,下面请看题: 试题描述 有n个小伙伴(编号从0到n-1)围坐一圈玩游戏.按照顺时 ...
- InvalidateRect只是增加重绘区域,在下次WM_PAINT的时候才生效
emWIN里面的无效重绘和windows很类似. WM_InvalidateArea()和WM_InvalidateRect()只重绘指定的区域,其他区域不会重绘,这样避免了闪烁,重绘发生在下次WM_ ...
- androidstudio--gsonformat--超爽的数据解析方式
很久以前写json解析用原始的解析json的方法,后来为了加快开发进度,开始使用gson,fastjson等第三方jar包来进行json解析,为了保持apk足够小,不因为引入jar包导致apk文件过大 ...