英文:
why ul-list items not getting space between them?
问题
我试图创建一条线，其中列表项在一行中应具有间隔，但我不明白为什么在使用 display: flex; 和应用 justify-content: space-between 时没有生效。
.container {
border: 2px solid red;
background-color: antiquewhite;
height: 650px;
display: flex;
justify-content: space-around;
}
.ul-list {
display: flex;
list-style-type: none;
border: 2px solid green;
margin-top: 0;
margin-left: 40px;
margin-right: 50px;
justify-content: space-between;
}
.list-item {
border: 2px solid red;
}
<div class="container">
<div class="n1">
<div>Left</div>
</div>
<div class="list1">
<ul class="ul-list">
<li class="list-item">ONE</li>
<li class="list-item">TWO</li>
<li class="list-item">THREE</li>
<li class="list-item">FOUR</li>
<li class="list-item">FIVE</li>
</ul>
</div>
<div class="n1">
<div>RIGHT</div>
</div>
</div>
我知道可以通过应用外边距来实现，但为什么不能使用 space-around 呢？
英文:
I am trying to create a line in which the list item should have space in a row but I'm not getting why it is not applying when using display: flex; and justify-content: space-between is applied in ul-list class
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
border: 2px solid red;
background-color: antiquewhite;
height: 650px;
display: flex;
justify-content: space-around;
}
.ul-list {
display: flex;
list-style-type: none;
border: 2px solid green;
margin-top: 0;
margin-left: 40px;
margin-right: 50px;
justify-content: space-between;
}
.list-item {
border: 2px solid red;
}
<!-- language: lang-html -->
<div class="container">
<div class="n1">
<div>Left</div>
</div>
<div class="list1">
<ul class="ul-list">
<li class="list-item">ONE </li>
<li class="list-item">TWO</li>
<li class="list-item">THREE</li>
<li class="list-item">FOUR</li>
<li class="list-item">FIVE</li>
</ul>
</div>
<div class="n1">
<div>RIGHT</div>
</div>
</div>
<!-- end snippet -->
I know this can be done by applying a margin, but why it's not getting why not with space-around?
答案1
得分: 1
justify-content: space-between 只有在 flex 容器的宽度大于项目的宽度时才会在项目之间添加空白间隔。
在你的情况下，你可以为 .ul-list 设置一个比内容更宽的宽度，或者按照 @ImranMalik 的建议设置一个 gap。
请注意，以上是 CSS 样式的说明，无需翻译。
英文:
justify-content: space-between will put space between your flex items only if the flex container is larger than the items.
In your case, you could set a width for .ul-list which is wider than the contents, or you can set a gap as suggested by @ImranMalik.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
border: 2px solid red;
background-color: antiquewhite;
height: 50px;
display: flex;
justify-content: space-around;
margin-bottom: 1em;
}
.ul-list {
display: flex;
list-style-type: none;
border: 2px solid green;
justify-content: space-between;
margin: 0;
padding: 0;
}
.list-item {
border: 2px solid red;
}
<!-- language: lang-html -->
<div class="container">
<div class="n1">
<div>Left</div>
</div>
<div class="list1">
<ul class="ul-list">
<li class="list-item">ONE </li>
<li class="list-item">TWO</li>
<li class="list-item">THREE</li>
<li class="list-item">FOUR</li>
<li class="list-item">FIVE</li>
</ul>
</div>
<div class="n1">
<div>Right</div>
</div>
</div>
<div class="container">
<div class="n1">
<div>Left</div>
</div>
<div class="list1">
<ul class="ul-list" style="width: 285px;">
<li class="list-item">ONE </li>
<li class="list-item">TWO</li>
<li class="list-item">THREE</li>
<li class="list-item">FOUR</li>
<li class="list-item">FIVE</li>
</ul>
</div>
<div class="n1">
<div>Right</div>
</div>
</div>
<div class="container">
<div class="n1">
<div>Left</div>
</div>
<div class="list1">
<ul class="ul-list" style="gap: 1em;">
<li class="list-item">ONE </li>
<li class="list-item">TWO</li>
<li class="list-item">THREE</li>
<li class="list-item">FOUR</li>
<li class="list-item">FIVE</li>
</ul>
</div>
<div class="n1">
<div>Right</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
.ul-list { gap: 10px; }
使用 gap 属性在 flex 项目之间添加间隔。
英文:
.ul-list {
gap: 10px;
}
Use gap property to add spaces between flex items.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论