CSS display inline 屬性與用法

CSS display inline 的屬性是用來定義元素在同一行呈現,也就是圖片或文字均不換行的意思,相對應的用法為 display block,我們將在另一篇做詳細的介紹,如果你的文字(常用在標題)不想換行,可以使用 display inline 的技巧,請看以下範例。

CSS display inline 語法範例一、DIV 區塊橫向水平

<div style="display:inline;">元素一</div><div style="display:inline;">元素二</div>

範例呈現結果如
元素一元素二
我們必須先說明的是呈現結果的那個外框框是額外加上去的,只是為了讓範例比較清楚而已,範例中的兩個 <div> 區塊本來應該是呈現兩行的結果,但是我們使用了 display:inline 強制兩個 <div> 不換行,所以兩個 <div> 區塊就乖乖的排在同一行。但如果兩個 <div> 區塊的寬度加起來,超過灰色的虛線框框範圍,還是會自動折到下一行,因為空間不夠,當然不能勉強啦!

另外 display:inline 還可以與 overflow 搭配做一些變化,例如標題過長的時候,卻又不想換行顯示,就可以用 display:inline 搭配 overflow 的隱藏技巧(overflow:hidden)來達成,這是許多大型網站在版面排版上常用到的技巧。

CSS display inline 範例二、ul li 橫向水平
<style type="text/css">
<!--
#B ul li {
 display:inline;
}
-->
</style>
<div id="A">
<b>原始呈現</b>
<ul>
 <li>這裡是項目一</li>
 <li>這裡是項目二</li>
</ul>
</div>
<div id="B">
<b>橫向水平呈現</b>
<ul>
 <li>這裡是項目一</li>
 <li>這裡是項目二</li>
</ul>
</div>
以上範例呈現結果(詳細解說參閱:CSS ul li 橫向水平
原始呈現
 ●這裡是項目一
 ●這裡是項目二
橫向水平呈現
 這裡是項目一 這裡是項目二
範例中我們準備了兩組不同的 DIV 區塊,裡面包含有 </ul></li> 項目標籤,第一個區塊(id="A")是原始呈現效果,預設為垂直排版,且每個項目前方有一個黑點做開頭,第二個區塊(id="B")則使用了 CSS display inline 的屬性,讓每個 </li> 項目呈現橫向水平排版效果。

CSS display inline 相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C