`//My HTML code
<div>
<div className="picbot">PicBot</div>
<ul className="navbarlist">
<li>Overview</li>`your text`
<li>Examples</li>
<li>Tour</li>
<li>Blog</li>
<li>Help</li>
</ul>
<button className="download">Download</button>
</div>`
// My CSS code
.navbarlist {
list-style: none;
display: inline-flex;
flex-direction: row;
color: rgb(192, 190, 190);
font-size: 18px;
font-weight: 600;
justify-content: space-between;
}
我应用了justify内容:space between在ul标记上使用className.navbarlist期望列表中的项目均匀间隔,但它们没有(我在html中使用className而不是class,因为它是用jsx编写的)
2条答案
按热度按时间luaexgnf1#
它们是均匀间隔的,没有额外的空间供它们占用。所以它们之间没有空间。Inline 元素(包括
inline-flex
)不会自动扩展到其容器的宽度。您可以通过将
inline-flex
更改为flex
,使整个<ul>
占据其容器的宽度,例如:wrrgggsh2#
你没有给你的div(.navbarlist)添加宽度,这样,div就不会像预期的那样扩展和增加项目之间的间隙。尝试添加宽度,看看是否有帮助。
另外,还有一种不同的解决方案。您可以简单地将
inline-flex
更改为flex
。这样您就不一定需要添加width
。