Question

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

我相信当前不这样做，因为锚标记是一个内联元素。如果我将display：inline-block添加到 header .nav a 选择器的CSS上，则可以按我的要求进行操作，但不支持我设置的direction属性在 标头.nav 选择器中，并反转元素的顺序。

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

我对此进行了研究，并在MDN site for the direction CSS property上显示

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

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

具有嵌入值，什么也没发生
具有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选择器中设置的direction属性，并反转元素的顺序。

这是更改方向并具有inline-block元素时的预期结果。订单将被切换。

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

时才能这样做

普通

相对于双向算法，该元素未打开附加的嵌入级别。对于内联元素，隐式¹重新排序可跨元素边界进行。

双向替代

这意味着在元素内部，重新排序严格按照'direction'属性进行；双向算法的隐式¹部分被忽略。

这里是一个示例，可以更好地理解并了解在使用额外包装时的区别：

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>

¹该算法由基于字符属性的隐式部分以及用于嵌入和覆盖的显式控件组成。 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>

为什么direction属性在块级元素上不起作用

1 个答案: