在我的react代码中尝试理解CSS中的Justify内容,我尝试使用justify内容:间隔,但它不起作用

lrpiutwd  于 2023-04-13  发布在  React
关注(0)|答案(2)|浏览(123)
`//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编写的)

luaexgnf

luaexgnf1#

它们是均匀间隔的,没有额外的空间供它们占用。所以它们之间没有空间。Inline 元素(包括inline-flex)不会自动扩展到其容器的宽度。
您可以通过将inline-flex更改为flex,使整个<ul>占据其容器的宽度,例如:

.navbarlist {
  list-style: none;
  display: flex;  // <-- here
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}
<div>
  <div class="picbot">PicBot</div>
  <ul class="navbarlist">
    <li>Overview</li>
    <li>Examples</li>
    <li>Tour</li>
   <li>Blog</li>
   <li>Help</li>
  </ul>
  <button class="download">Download</button>
</div>
wrrgggsh

wrrgggsh2#

你没有给你的div(.navbarlist)添加宽度,这样,div就不会像预期的那样扩展和增加项目之间的间隙。尝试添加宽度,看看是否有帮助。

.navbarlist {
list-style: none;
display: flex;
flex-direction: row;
color: rgb(192, 190, 190);
font-size: 18px;
font-weight: 600;
justify-content: space-between;
width: 800px

}
<div>
<div class="picbot">PicBot</div>

<ul class="navbarlist">
<li>Overview</li>`your text`
<li>Examples</li>
<li>Tour</li>
<li>Blog</li>
<li>Help</li>
</ul>
            
<button class="download">Download</button>
</div>

另外,还有一种不同的解决方案。您可以简单地将inline-flex更改为flex。这样您就不一定需要添加width

相关问题