Почему свойство направления не работает на элементах блочного уровня
Я хочу, чтобы функция наведения на панели навигации расширяла всю высоту родительского элемента заголовка.
Я считаю, что в настоящее время это не делается, потому что тег привязки является встроенным элементом. Если я добавлю display: inline-block в CSS для селектора заголовок .nav, это будет работать так, как я хочу, НО тогда не будет учитывать свойство направления, которое я установил в селекторе заголовок .nav, и изменить порядок элементов на противоположный.
Может ли кто-нибудь сказать мне, почему это будет?
Я исследовал это, и на Сайт MDN для свойства CSS direction написано
For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.
если я добавлю свойство CSS юникод-биди:
Спасибо за терпение, я нуб во всем этом.
* {
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>
Ответы 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, implicit1 reordering works across element boundaries.
bidi-override
This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit1 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>1The 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>Спасибо, @TemaniAfif. это помогло мне понять это намного лучше. Ваше здоровье
Если вы установите
directionнаrtl, в соответствии с примером MDN, который вы сами привели, изменение навигационных ссылок является предполагаемым поведением.