[英]Why does flex-direction: row only work when I set the element to display: inline-block?
The flex-direction:row
is only working when I add display: inline-block
inside nav li{}
. flex-direction:row
仅在我在nav li{}
内添加display: inline-block
时才有效。 I know it because -webkit-flex-direction: row-reverse;
我知道是因为-webkit-flex-direction: row-reverse;
is working.正在工作。 But other properties like justify-content: space-between;
但其他属性如justify-content: space-between;
are not working.不工作。
And the opposite;而相反; if I remove display: inline-block
inside nav li{}
, then only flex-direction:column
is working.如果我在nav li{}
删除display: inline-block
,那么只有flex-direction:column
正在工作。 What is the problem?问题是什么?
nav{ background: grey; display:-webkit-flex; -webkit-flex-direction: row; } nav li{ list-style: none; }
<nav> <ul> <li><a href="#about">About</a><li> <li><a href="#skills">Skills</a></li> <li><a href="#education">Education</a></li> <li><a href="#experience">Experience</a></li> <li><a href="#portfolio">Portfolio</a></li> </ul> </nav>
It only gives you the illusion that it works.它只会给你一种它有效的错觉。
Flex set at the <nav>
level makes the <ul>
a flex item, and doesn't affect <li>
elements.在<nav>
级别设置的 Flex 使<ul>
成为一个弹性项目,并且不会影响<li>
元素。
You want the Flex container to be <ul>
.您希望 Flex 容器为<ul>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.