CSS Display 屬性範例

display 的屬性值有 block, inline, none

block：以新的一列方式呈現，寬度會儘可能延伸至最左及最右 例如 Div 這個元素就是 block 類別
inline：不以新的一列方式呈現，寬度只佔所需的大小 例如 span 這個元素就是 inline 類別
display設為 none 時該元素將為不可見
example：
原 a 元素預設值為 inline
第一個連結 第二個連結 第三個連結
將 a 元素改為 block方式呈現：
第一個連結 第二個連結 第三個連結
程式碼：

	<p>原 a 元素預設值為 inline</p>
	<a href="#" target="_blank">第一個連結</a>
	<a href="#" target="_blank">第二個連結</a>
	<a href="#" target="_blank">第三個連結</a>
	<p>將 a 元素改為 block方式呈現：</p>
	<a href="#" class="display-block" target="_blank">第一個連結</a>
	<a href="#" class="display-block" target="_blank">第二個連結</a>
	<a href="#" class="display-block" target="_blank">第三個連結</a>

view raw index.html hosted with ❤ by GitHub

	<style>
	.display-inline {
	display: inline;
	}
	.display-block{
	display: block;
	}
	</style>

view raw style.css hosted with ❤ by GitHub