让横向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 它的效 ...
随机推荐
- [FBA]SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用
//http://tech.ddvip.com/2014-05/1401197453210723.html 由于项目的需要,登录SharePoint Application的用户将从一个统一平台中获取 ...
- Linux CPU 核数检查脚本
#!/bin/bash physicalNumber=0 coreNumber=0 logicalNumber=0 HTNumber=0 logicalNumber=$(grep "proc ...
- 2015 Multi-University Training Contest 6
1001 Average 忍不住又补了一题. 只要枚举1与2之间1给2,2给1,什么都不做三种状态. 后面的情况都已经决定了. (估计只有我比赛的时候把a candy当成a个糖果了吧QAQ) # in ...
- sync命令
sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的运行效率.sync命令则 ...
- MediaWiki搭建教程
♦ MediaWiki是什么以及有什么作用,这里我就不再阐述了,网上可以查到很多.这里只是简单记录一下搭建wiki的基本过程,给一些热爱捯饬的小伙伴一些参考. ♦ 其实wiki的搭建本身很简单,最 ...
- C++内存申请容易产生的错误
1.起因 前两天用python写了一款工具用来把excel文件转换成json文件,今天给他们用的时候发现在文本下看正常,但是在程序中使用就是会多出一些莫名其妙的字符. 2. 调查 原来主要是我写的工具 ...
- HDU3371--Connect the Cities(最小生成树)
Problem Description In 2100, since the sea level rise, most of the cities disappear. Though some sur ...
- Android 内存监测工具 DDMS --> Heap(转)
DDMS 的全称是Dalvik Debug Monitor Service,它为我们提供例如:为测试设备截屏,针对特定的进程查看正在运行的线程以及堆信息.Logcat.广播状态信息.模拟电话呼叫.接收 ...
- python 自动认证登录
import urllib import base64 import urllib2 def auto_login(urllink,username,password): authstr = 'Bas ...
- JedisConnectionException: Unexpected end of stream.
在实际项目中遇到redis读取时报错. 报错是 [ERROR] redis.clients.jedis.exceptions.JedisConnectionException: Unexpected ...