欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

display:inline vs float

程序员文章站 2024-03-23 13:58:28
...

当我们需要把多个li, p 等行元素显示在一行是,推荐使用diplay:inline, float一般还会修改整个行的样式.

 

<div id="header">
    <ul id="menu">
        <!-- 首页,当前section加上current类 -->
        <li id="menu-home" class="current"><a id="lnkHome" href="http://www.cnblogs.com/Flyear/">
            Home</a></li>
        <!-- 联系 -->
        <li id="menu-contact"><a id="lnkContact" href="http://space.cnblogs.com/msg/send/Flyear">
            Contact</a></li>
        <!-- 相册 -->
        <li id="menu-gallary"><a id="lnkGallery" href="http://www.cnblogs.com/Flyear/gallery.html">
            Gallery</a></li>
        <!-- Rss订阅 -->
        <li id="rss"><a id="lnkRss" href="http://www.cnblogs.com/Flyear/rss">RSS</a></li>
    </ul>
    <div id="newmsg">
    </div>
    <h1>
        <!-- 主标题 -->
        <a id="lnkBlogTitle" href="http://www.cnblogs.com/Flyear/">flyear's thought</a>
        <!-- 子标题 -->
        <small>var programer = new person { Name="Flyear", BlogAddress="http://flyear.cnblogs.com",
            familily="C#,asp.net,html,css,javascript" }</small>
    </h1>
</div>

 

要想让li显示在一行,之前通常是用float:left,并且这样会让当前标签从流式布局变为浮动布局, 今天发现通过display:inline 不但能达到float:left的效果, 不会破坏流式布局.

转载于:https://www.cnblogs.com/feinian/archive/2011/07/16/2108210.html