为什么direction属性不适用于块级元素

Question

我希望导航栏的悬停功能扩展标题父元素的完整高度。

我相信这当前没有这样做，因为锚标签是一个内联元素。如果我将标题：inline-block添加到CSS的标题.nav一个选择器，这就像我想要的那样工作然后不尊重我在标题.nav选择器中设置的方向属性并反转元素的顺序。

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

我已经研究了这个和MDN site for the direction CSS property它说

要使direction属性对内联级元素产生任何影响，必须嵌入或覆盖unicode-bidi属性的值。

如果我添加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

然后不尊重我在标题.nav选择器中设置的方向属性并反转元素的顺序。

这是改变方向和使用inline-block元素时的预期结果。订单将被切换。

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

正常

该元素不会相对于双向算法打开额外的嵌入级别。对于内联元素，implicit1重新排序跨元素边界工作。

比迪烟，覆盖

这意味着在元素内部，根据'direction'属性严格按顺序重新排序;双向算法的implicit1部分被忽略。

这是一个更好地理解并在有额外包装时看到差异的示例：

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>

1该算法包含一个基于字符属性的隐式部分，以及嵌入和覆盖的显式控件。 CSS 2.1依赖于此算法来实现正确的双向渲染。 'direction'和'unicode-bidi'属性允许作者指定文档语言的元素和属性如何映射到此算法。

参考：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>