此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

box-orient

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性,因为它们在浏览器中的支持有限,且可能发生变化或被移除。不过,在没有标准选项的特定情况下,它们可以作为合适的替代方案。

这是原始的 css 弹性布局草案的一个属性,已经被最新的标准替代。查看 flexbox 了解现行标准。

box-orient CSS 属性用来设置一个元素是水平还是垂直布局其内容。

css
/* Keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* Global values */ box-orient: inherit; box-orient: initial; box-orient: unset; 

语法

box-orient 属性值需指定为以下关键字之一。

horizontal

盒子水平布局其内容。

vertical

盒子垂直布局其内容。

inline-axis (HTML)

盒子沿内联轴展示其子元素。

block-axis (HTML)

盒子沿块轴展示其子元素。

内联轴和块轴取决于写入模式的关键字,在英语中,分别对应水平和垂直方向。

形式定义

初始值inline-axis
适用元素elements with a CSS display value of box or inline-box
是否是继承属性
计算值as specified
动画类型离散值

形式语法

Error: could not find syntax for this item

示例

设置盒子水平布局

在这里,box-orient 属性会将两个 <p> 段落布局到同一行。

HTML

html
<div class="example"> <p>I will be to the left of my sibling.</p> <p>I will be to the right of my sibling.</p> </div> 

CSS

css
div.example { display: -moz-box; /* Mozilla */ display: -webkit-box; /* WebKit */ display: box; /* As specified */ /* Children should be oriented vertically */ -moz-box-orient: horizontal; /* Mozilla */ -webkit-box-orient: horizontal; /* WebKit */ box-orient: horizontal; /* As specified */ } 

结果

规范

不是任何标准的一部分。

浏览器兼容性

参见