为什么方向 属性 对块级元素不起作用

Question

我希望导航栏的悬停功能能够扩展页眉父元素的整个高度。

我认为目前没有这样做，因为锚标记是内联元素。如果我将 display: inline-block 添加到 header .nav a 选择器的 CSS 中，这会按我想要的方式工作但是然后不遵守我在 header.nav 选择器中设置的方向 属性 并反转元素的顺序。

谁能告诉我为什么会这样？

我研究过这个 MDN site for the direction CSS property 上面写着

For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.

如果我添加 unicode-bidi CSS 属性:

1. 使用嵌入值，没有任何反应

2. 使用 bidi-override 值，单词原地反转。

感谢您的耐心等待，我是菜鸟。

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  direction: rtl;
}
header .nav a {
  //display: inline-block;
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>

Answer 1

then does not honour the direction property I set in the header .nav selector and reverses the order of the elements.

这是改变方向并具有 inline-block 个元素时的预期结果。顺序将被调换。

文本的行为并不完全相同，这里 unicode-bidi 扮演它的角色。基本上当浏览器改变方向时，它不会分解文本并改变每个字符的顺序。仅当您更改 unicode-bidi

时才会执行此操作

normal

The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit¹ reordering works across element boundaries.

bidi-override

This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit¹ part of the bidirectional algorithm is ignored.

这是一个示例，可以更好地理解和查看使用额外包装器时的区别：

span {
  border:1px solid;
}
div {
 margin-top:10px;
}

<div style="direction:rtl;">lorem ipsum text</div>

<div style="direction:rtl;">lorem <span>ipsum text</span></div>

<div style="direction:rtl;">lorem <span style="display:inline-block">ipsum text</span></div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem ipsum text</div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span>ipsum text</span></div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span style="display:inline-block">ipsum text</span></div>

¹The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS 2.1 relies on this algorithm to achieve proper bidirectional rendering. The 'direction' and 'unicode-bidi' properties allow authors to specify how the elements and attributes of a document language map to this algorithm.

参考：https://www.w3.org/TR/CSS2/visuren.html#direction

---

以上都是有点复杂，使用方向不是要走的路。您可以考虑 text-align 和 inline-block:

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  text-align:right;
}
header .nav a {
  display: inline-block;
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>

或者使用 flexbox 轻松控制对齐方式：

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  text-align:right;
  display:flex;
  justify-content:flex-end;
}
header .nav a {
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>