让横向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 它的效 ...
随机推荐
- Oracle SQL 内置函数大全
SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数;SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ...
- 肢体语言心理学+FBI阅人术(行为心理学) 用最短的时间了解一个人
肢体语言心理学 如何从站姿判断人 每个人都有自己习惯的站立姿势.美国夏威夷大学心理学家指出,不同的站姿可以显示出一个人的性格特征. 站立时习惯把双手插入裤袋的人:城府较深,不轻易向人表露内心 ...
- PHP下利用PHPMailer配合QQ邮箱下的域名邮箱发送邮件
作 为PHP入门开发者,常常有这种述求:自己的网站中需要添加一个使用自己的域名作为发件人邮件地址的自动发送邮件的方法,用于诸如给用户发送验证码.通知 信息等.比如:我的某个用户注册模块,需要使用reg ...
- power oj/2360/Change
题目链接[https://www.oj.swust.edu.cn/problem/show/2360] 题意:给出两个四位数A.B,目地是用最少的步骤使A变成B.变换规则如下:1.相邻的两位数可以交换 ...
- cmd命令行
拷贝
- Python中pip安装问题解决
用国内镜像通过pip安装python的一些包,有时会出现安装失败, 为什么总是失败?自己操作老标准了,这么简单的几个小步骤还老是出错,不由得让我怀疑是否是撞墙了,可是又懒得买vpn去翻~~一墙,无法代 ...
- 缓存2 动态缓存 memcached
01准备下载好memcached.exe文件-->放置c:\memcached目录中02准备下载好php_memcache.dll文件-->放置php\ext扩展目录中03配置 php.i ...
- AC Me
AC Me Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submiss ...
- 常见B2C网站购物车的设计
对于大部分B2C网站来说,购物车是网站的咽喉之地,订单是白花花的银子,所有银子都必然流经购物车,购物车不能有失.优秀的购物车设计至少需要完成两项使命:一是方便用户多买货多掏银子:二是帮用户保管好待购的 ...
- 一个字符串搜索的Aho-Corasick算法
Aho和Corasick对KMP算法(Knuth–Morris–Pratt algorithm)进行了改进,Aho-Corasick算法(Aho-Corasick algorithm)利用构建树,总时 ...