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

Posted 2021-03-27

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

我相信这当前没有这样做，因为锚标签是一个内联元素。如果我将标题：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>

答案

然后不尊重我在标题.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>

以上是关于为什么direction属性不适用于块级元素的主要内容，如果未能解决你的问题，请参考以下文章

设置文本样式

HTML 5 Geolocation 不适用于 Directions API

块级元素和行内元素的定义

css 弹性布局

offsetWidth、scrollWidth、ClientWidth 属性不适用于 Html 元素

CSS3 过渡不适用于显示属性 [重复]