html - 为什么方向属性不适用于 block 级元素

Question

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

我相信目前还没有这样做，因为 anchor 标记是一个内联元素。如果我将 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 扮演它的 Angular 色。基本上当浏览器改变方向时，它不会分解文本并改变每个字符的顺序。仅当您更改 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

---

以上所有内容都有点复杂，使用 direction 不是正确的方法。您可以考虑使用 inline-block 和 text-align:

* {
  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>