float-left的对象如何居中

最新推荐文章于 2022-02-26 20:21:21 发布

BigPangPang

最新推荐文章于 2022-02-26 20:21:21 发布

阅读量713

点赞数

本文介绍了如何通过结合使用float:left和display:inline-block来解决导航栏元素无法居中显示的问题。通过代码示例，详细解释了如何利用这两种布局方式的互补优势，实现导航栏文本的水平居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做导航（nav）时，通常会用到float：left;但是这样做的话，让导航文本水平居中确实个麻烦事；

分析如下：

[float:left]有个伟大之处，它使div（或者其他标签）的宽度自适应其内容，但它却有个弊端：无法居中。
[display:inline-block]也有同样的特性，并且可以居中，但连续几个这样的东东，之间却会出现空格。

为了解决这个问题，我们可以把二者结合起来使用：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>inline-block解决float:left对象无法居中的问题。</title>
        <style type="text/css">
            * { margin:0; padding:0; list-style:none;}
            body { text-align:center;}
            li { float:left; font-size:12px;}
            a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}
            ul { display:inline-block; *display:inline; zoom:1;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">关于</a></li>
            <li><a href="#nogo">产品</a></li>
            <li><a href="#nogo">联系我们</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

原文链接：http://www.cnblogs.com/hema/archive/2009/12/17/1626497.html