display:inline的用法
2024-07-11 08:47:05
供稿：網友
<div> DIV1 </div>
<div> DIV2 </div>
這里DIV1和DIV2分別占一行，但是你給他們加上屬性后變了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2這時候顯示在同一行了，試試看吧
和 display:inline 對應的是 display:block，block 會讓應用了該 CSS 屬性的 HTML 標記變成塊級別元素，例如 SPAN 是行內顯示的，但是你加了 display:block 屬性就不一樣了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline比較經典的用法是用在 <ul> 下的 <li> 中
內聯
block一般一個塊占一行，除非float
inline是自動排為一行，就象段內的文字一樣，可成為多行。
display:inline 的作用是設置對象做為行內元素顯示，
inline是內聯對象的默認值（ps:內聯對象就是不自動產生換行的元素，比如span）
而我們一般用的div是塊級元素，默認display屬性是block,
但將div的display設置為inline的話，則多個div可以象span一樣顯示在一行了。
建議樓主在網上下個css幫助手冊
display屬性
block : CSS1 塊對象的默認值。將對象強制作為塊對象呈遞，為對象之后添加新行
none : CSS1 隱藏對象。與 visibility 屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline : CSS1 內聯對象的默認值。將對象強制作為內聯對象呈遞，從對象中刪除行
inline-block : IE5.5 將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內
compact : CSS2 未支持。分配對象為塊對象或基于內容之上的內聯對象
marker : CSS2 未支持。指定內容在容器對象之前或之后。要使用此參數，對象必須和 :after 及 :before 偽元素一起使用
inline-table : CSS2 未支持。將表格顯示為無前后換行的內聯對象或內聯容器
list-item : CSS2 將塊對象指定為列表項目。并可以添加可選項目標志
table-caption : CSS2 未支持。將對象作為表格標題顯示
table-cell : CSS2 未支持。將對象作為表格單元格顯示
table-column : CSS2 未支持。將對象作為表格列顯示
table-column-group : CSS2 未支持。將對象作為表格列組顯示
table-header-group : CSS2 將對象作為表格標題組顯示
table-footer-group : CSS2 將對象作為表格腳注組顯示
display:inline 對應不顯示為 display:none
display:block 對應不顯示為 hidden
說通俗點 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。
