经过测试，适合所有浏览器 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等主流浏览器。 ...
这种方法常用于创建灵活、响应式的布局，因为它允许更精细的控制和更好的跨浏览器兼容性。 描述中重复了标题，强调了使用`<ul>`和`<li>`元素来创建类似表格的布局。 标签“DIV CSS”表明这个话题主要关注的是HTML...
在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。本教程将详述如何使用HTML的`<div>`、`<ul>`和`<li>`标签，结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用，...
在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中，并且无需指定具体的宽度和...
在网页设计中，菜单导航是页面布局的重要组成部分，它引导用户轻松访问网站的不同部分。本教程将详细介绍如何利用HTML的`<ul>`和`<li>`元素，结合CSS样式，来创建一个具有韩国风格的菜单导航。这个"用“ul li”及css...
标题提到的“浮动后的li元素居中实现方法”主要探讨了如何在使用浮动布局时，确保`<li>`元素在导航条中居中对齐。以下是几种常用的方法及其优缺点： 1. **文本居中对齐**： - 在包裹`<ul>`的`<div>`上应用`text-...
在网页设计中，列表（LI元素）的布局是一个常见的需求，尤其是当需要将列表中的项目水平显示在一行内，并且要求这些项目居中显示时。通常情况下，列表项会使用CSS的浮动属性（float）来实现横向布局，比如左浮动。...
但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是使用ul li的backgrou-image（背景图片）来解决。 如下： 复制代码代码如下: ul li{ height:28px; /*列表项的高度*/ ...
水平导航在网页设计中是一种常见的布局方式，它通常位于页面顶部，用于链接网站的主要部分，提供用户友好的导航体验。本项目"水平导航纯CSS模仿百度导航.zip"旨在通过CSS技术，模仿百度导航栏的样式和功能，为开发者...
它们通常用于创建导航菜单、展示列表数据、构建简单的表格等场景。以下是对`<ul>`和`<li>`基本用法的详细分析： 1. **无序列表的基础用法**： - `<ul>`元素定义了一个无序列表，其内部的每个`<li>`元素表示列表中...
使用`<ul>`和`<li>`标签来构建无序列表，可以轻松创建水平导航。例如： ```html <ul class="mac-navigation"> <li>首页</a></li> <li>关于我们</a></li> <li>产品与服务</a></li> <li>联系我们</a></li> </ul> ...
本文主要探讨了如何通过CSS实现不同类型的元素的水平居中。 首先，对于行内元素（如文本或图像），我们可以使用`text-align: center`属性将其在父元素内水平居中。例如，如果有一个包含文本的`div`元素，只需在CSS...
在CSS布局中，水平居中是一项常见的需求，无论是对行内元素还是块状元素，都有多种方法可以实现。本文将详细讲解如何使用CSS使元素水平居中，特别适合初学者理解掌握。 首先，我们来看一下如何使行内元素如文本、...
3. **li中字体水平、竖直居中**: 使用`text-align:center`使文本水平居中，而`line-height`与元素高度相等时，可以实现竖直居中。例如，如果`li`的高度是45px，`line-height`也应设为45px。 4. **li控制边框样式**:...
我们需要使用`<nav>`元素来定义导航区域，然后使用`<ul>`和`<li>`元素创建无序列表，每个列表项代表一个导航链接。链接可以通过`<a>`标签实现，其中`href`属性指定链接的目标URL。 2. **CSS布局**：谷歌导航栏一般...
在现代网页设计中，实现内容的自适应宽度并进行水平居中是一个非常常见且实用的需求。自适应布局能够使网页更加灵活，能够适应不同尺寸的屏幕，提高用户体验。本文将详细讲述几种实现自适应宽度水平居中的CSS方法。 ...
7. `ul`和`li`的浮动使它们并排排列，创建水平导航菜单。 8. `.nav_sub ul a`为链接添加内填充，以便它们之间有适当的间距。 9. `.more`类让“更多”链接浮动到右侧。 这个例子展示了如何利用CSS控制布局和样式，...