CSS3 box-orient 屬性
實例
指定div元素的子元素橫向排列：
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
嘗試一下»
瀏覽器支持
目前所有主流瀏覽器都不支持box-orient屬性。
Firefox通過私有屬性- MOZ-box-orient支持。
Safari, Opera, 和Chrome通過私有屬性-webkit-box-orient 支持.
屬性定義及使用說明
box-orient 屬性指定一個box子元素是否應按水平或垂直排列。
Tip:水平方向的box裡的子元素是由左到右顯示，垂直方向的box顯示從上到下排列。然而， box-direction方向可由box-ordinal-group屬性改變這個順序。
| 默認值: | inline-axis |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxOrient="vertical" |
語法
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
| 值 | 說明 |
|---|---|
| horizontal | 指定子元素在一個水平線上從左至右排列 |
| vertical | 從頂部向底部垂直佈置子元素 |
| inline-axis | 子元素沿著內聯坐標軸（映射到橫向） |
| block-axis | 子元素沿著塊坐標軸（映射到垂直） |
| inherit | box-orient 屬性的值應該從父元素繼承 |