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 橫向水平）<!--
#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>
原始呈現
●這裡是項目一
●這裡是項目二
橫向水平呈現
這裡是項目一 這裡是項目二
範例中我們準備了兩組不同的 DIV 區塊，裡面包含有 </ul></li> 項目標籤，第一個區塊（id="A"）是原始呈現效果，預設為垂直排版，且每個項目前方有一個黑點做開頭，第二個區塊（id="B"）則使用了 CSS display inline 的屬性，讓每個 </li> 項目呈現橫向水平排版效果。●這裡是項目一
●這裡是項目二
橫向水平呈現
這裡是項目一 這裡是項目二
CSS display inline 相關主題