让横向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 它的效 ...
随机推荐
- Bmob Androidstudio配置
AndroidStudio配置 鉴于目前Google官方推荐使用 Android Studio 进行Android项目开发,自 V3.4.2 开始,Bmob Android SDK 可以使用Gradl ...
- CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- ajaxpro——js调用后台的方法
前提:添加并引用类库ajaxpro.dll 1.把引用的类库改为自己(如果是自己的话,就不用修改): <%@ Page Language="C#" AutoEventWire ...
- wpf之ListBox中ListBoxItem横向排列
ListBox中ListBoxItem默认是纵向排列,可以通过自定义样式,让其横向排列, 如下Demo: XAML: <Window x:Class="ListBoxItemStyle ...
- composer安装自己的包
composer的出现,使得PHPer可以像Java一样更加方便的管理代码.在composer没有出现之前,人们大多使用pear.pecl管理依赖,但是局限性很多,也很少有人用(接触的大多phper基 ...
- HDU 3410 Passing the Message
可以先处理出每个a[i]最左和最右能到达的位置,L[i],和R[i].然后就只要询问区间[ L[i],i-1 ]和区间[ i+1,R[i] ]最大值位置即可. #include<cstdio&g ...
- iOS特殊字符的转义字符
所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称为转义字符,因为 ...
- 笔记整理--Linux守护进程
Linux多进程开发(三)进程创建之守护进程的学习 - _Liang_Happy_Life__Dream - 51CTO技术博客 - Google Chrome (2013/10/11 16:48:2 ...
- sql语句--查询语句(MySQL)
1.截取字符串 left(str, length),right(str, length),substring(str, pos, length) 原文:http://www.jb51.net/arti ...
- μCos-ii学习笔记2_任务管理
二.任务管理 任务管理是ucos-ii操作系统的核心内容.这一章大致就以下流程来介绍和总结任务管理的相关知识. 要实现复杂任务管理,必然要定义众多数据来描述任务状态,为了精简,建立了许多不同的数据结构 ...