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的效果, 不会破坏流式布局.