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.rzrgm.cn/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.rzrgm.cn/Flyear/gallery.html"> Gallery</a></li> <!-- Rss訂閱 --> <li id="rss"><a id="lnkRss" href="http://www.rzrgm.cn/Flyear/rss">RSS</a></li> </ul> <div id="newmsg"> </div> <h1> <!-- 主標題 --> <a id="lnkBlogTitle" href="http://www.rzrgm.cn/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的效果, 不會破壞流式布局.
浙公網安備 33010602011771號