zoukankan      html  css  js  c++  java
  • display:inline vs float

    当我们需要把多个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的效果, 不会破坏流式布局.

  • 相关阅读:
    Oozie_02安装遇到错误【20161116】
    Oozie_01安装教程【20161116】
    hadoop2.x常用端口及定义方法
    谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程
    找回密码(一)【实际项目】
    解决使用SecureCRT出现的Generic clipboard failure错误【自己亲身经历】
    [php]php总结(2)
    [php]php总结(1)
    [php]php时间格式化
    [hadoop]mapreduce原理简述
  • 原文地址:https://www.cnblogs.com/feinian/p/2108210.html
Copyright © 2011-2022 走看看