经过测试，适合所有浏览器 FF ,IE 6 - IE8
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档-SH!</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}
#area{
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#area ul{
float:left;
position:relative;
left:50%;
}
#area ul li{
float:left;
margin:10px;
padding:0 10px;
position:relative;
right:50%;
line-height:60px;
border:solid 1px #000;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center</h1>
<div id=”area”>
<ul >
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
li浮动还可以居中ul.html
昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下： 不改变html结构，使导航菜单垂直水平居中，导航宽度自适应屏幕100%，高度30px;单项高度28px,宽80px; 兼容：ie6+,ff,chrome,opera等主流浏览器。 ...
复制代码代码如下: ”demo”> <ul> <li>我居中了</a></li> <li>我居中了</a></li> <li>我居中了</a></li> <li>我居中了</a></li> <li>我居中了</a></li> </ul> </div> 当做的是水平导航条时，有以下三种办法： 1、...
在制作页面是，li浮动是很常用的，一般情况也不用其居中，但有时，其特殊原因需要居中，这是就有点犯难了，下面使用相对定位的原理来解决下
5.9 关于ul 和li 的样式详解 5.9.1 使用list-style-type 属 5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构...
当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: 复制代码代码如下: ”navbar”> <ul>...
导航，少量数据表格，居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ...
但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是使用ul li的backgrou-image（背景图片）来解决。 如下： 复制代码代码如下: ul li{ height:28px; /*列表项的高度*/ ...
类似这样的效果： 设为首页 | 加入收藏 | 联系我们 如上：要让LI横排，又要让LI居中，开始我用FLAOT，很麻烦，后来发现在CSS里给LI的样式加个：display：inline就可以了，简单吧！
/*定义导航宽度，水平居中*/ } nav ul { list-style: none; /*去掉列表符号*/ } nav ul li { float: left; /*水平排列*/ position: relative; /*父级元素相对定位*/ } nav ul li ul { position: ...
3 li中字体水平、竖直居中 4 li控制边框样式 5 使用html + css3 渐变画图 制作背景图片 6 更改颜色透明度 7 DIV制作边框阴影 先看效果图: CSS Code复制内容到剪贴板 <!doctype html> html...
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，...复制代码代码如下: ”favViewicon> <ul class=”clearfix”> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> 关于position:r
在制作中内容居中通常方法是给容器width固定宽度，然后text-align:center;margin:0 auto;或者将块装换成内联元素display:inline，然后text-align:center就能实现居中效果...} .sjbest ul li { float:left;position:rela
漂亮实用jquery绿色风格水平二级导航菜单 45.适合后台的jquery二级下滑菜单带展开与合拢功能 46.树形菜单jquery.popup支持文本框弹出层选择项插件 47.通用性强的jquery带箭头跟随的垂直菜单组(jquery vmenu)...
列表标签：使用<ul><li>实现无序列表，使用<ol><li>实现有序列表； 使用标签添加图片，使用标签添加链接，使用table添加表格，使用thead、tbody、tfood定义表格； 表单标签：使用创建表单，文本输入框，密码输入框，...
一款非常简单的jQuery纵向时间轴代码，无论li内容多少，直线都不会超出，并且红点永远居中的jQuery垂直时间轴插件。 js代码 [removed] $(document).ready(function(e) { var h = $(".about4_main ul li:first-...
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者...HTML Markup 复制代码代码如下:<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>
8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;...