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> 項目呈現橫向水平排版效果。