box-orient

**非标准：**此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为在将来可能会改变。

**已弃用：**此功能不再推荐。尽管一些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，如果可能，请更新现有代码；查看本页底部的 兼容性表 以指导您的决定。请注意，此功能可能随时停止工作。

**警告：**这是原始 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)

盒子沿着块轴显示其子元素。

内联轴和块轴是依赖于书写模式的关键字，在英语中分别映射到 horizontal 和 vertical。

描述

HTML DOM 元素默认沿着内联轴排列其内容。此 CSS 属性仅适用于具有 CSS display 值为 box 或 inline-box 的 HTML 元素。

正式定义

初始值inline-axis (horizontal 在 XUL 中)
应用于具有 CSS display 值为 box 或 inline-box 的元素
继承否
计算值按指定
动画类型离散

正式语法

box-orient =
  horizontal | vertical | inline-axis | block-axis | inherit

示例

设置水平盒子方向

此处，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 */
}

结果

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅