ul 列表项之间为什么没有间距？

huangapple
go评论87阅读模式
英文:

why ul-list items not getting space between them?

问题

我试图创建一条线，其中列表项在一行中应具有间隔，但我不明白为什么在使用 display: flex; 和应用 justify-content: space-between 时没有生效。

  1. .container {
  2.   border: 2px solid red;
  3.   background-color: antiquewhite;
  4.   height: 650px;
  5.   display: flex;
  6.   justify-content: space-around;
  7. }
  9. .ul-list {
  10.   display: flex;
  11.   list-style-type: none;
  12.   border: 2px solid green;
  13.   margin-top: 0;
  14.   margin-left: 40px;
  15.   margin-right: 50px;
  16.   justify-content: space-between;
  17. }
  19. .list-item {
  20.   border: 2px solid red;
  21. }
  1. <div class="container">
  2.   <div class="n1">
  3.     <div>Left</div>
  4.   </div>
  5.   <div class="list1">
  6.     <ul class="ul-list">
  7.       <li class="list-item">ONE</li>
  8.       <li class="list-item">TWO</li>
  9.       <li class="list-item">THREE</li>
  10.       <li class="list-item">FOUR</li>
  11.       <li class="list-item">FIVE</li>
  12.     </ul>
  13.   </div>
  14.   <div class="n1">
  15.     <div>RIGHT</div>
  16.   </div>
  17. </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 -->

  1. .container {
  2.   border: 2px solid red;
  3.   background-color: antiquewhite;
  4.   height: 650px;
  5.   display: flex;
  6.   justify-content: space-around;
  7. }
  9. .ul-list {
  10.   display: flex;
  11.   list-style-type: none;
  12.   border: 2px solid green;
  13.   margin-top: 0;
  14.   margin-left: 40px;
  15.   margin-right: 50px;
  16.   justify-content: space-between;
  17. }
  19. .list-item {
  20.   border: 2px solid red;
  21. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;n1&quot;&gt;
  3.     &lt;div&gt;Left&lt;/div&gt;
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;list1&quot;&gt;
  6.     &lt;ul class=&quot;ul-list&quot;&gt;
  7.       &lt;li class=&quot;list-item&quot;&gt;ONE &lt;/li&gt;
  8.       &lt;li class=&quot;list-item&quot;&gt;TWO&lt;/li&gt;
  9.       &lt;li class=&quot;list-item&quot;&gt;THREE&lt;/li&gt;
  10.       &lt;li class=&quot;list-item&quot;&gt;FOUR&lt;/li&gt;
  11.       &lt;li class=&quot;list-item&quot;&gt;FIVE&lt;/li&gt;
  12.     &lt;/ul&gt;
  13.   &lt;/div&gt;
  14.   &lt;div class=&quot;n1&quot;&gt;
  15.     &lt;div&gt;RIGHT&lt;/div&gt;
  16.   &lt;/div&gt;
  17. &lt;/div&gt;

<!-- 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 -->

  1. .container {
  2.   border: 2px solid red;
  3.   background-color: antiquewhite;
  4.   height: 50px;
  5.   display: flex;
  6.   justify-content: space-around;
  7.   margin-bottom: 1em;
  8. }
  9. .ul-list {
  10.   display: flex;
  11.   list-style-type: none;
  12.   border: 2px solid green;
  13.   justify-content: space-between;
  14.   margin: 0;
  15.   padding: 0;
  16. }
  17. .list-item {
  18.   border: 2px solid red;
  19. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.     &lt;div class=&quot;n1&quot;&gt;
  3.         &lt;div&gt;Left&lt;/div&gt;
  4.     &lt;/div&gt;
  5.     &lt;div class=&quot;list1&quot;&gt;
  6.         &lt;ul class=&quot;ul-list&quot;&gt;
  7.             &lt;li class=&quot;list-item&quot;&gt;ONE &lt;/li&gt;
  8.             &lt;li class=&quot;list-item&quot;&gt;TWO&lt;/li&gt;
  9.             &lt;li class=&quot;list-item&quot;&gt;THREE&lt;/li&gt;
  10.             &lt;li class=&quot;list-item&quot;&gt;FOUR&lt;/li&gt;
  11.             &lt;li class=&quot;list-item&quot;&gt;FIVE&lt;/li&gt;
  12.         &lt;/ul&gt;
  13.     &lt;/div&gt;
  14.     &lt;div class=&quot;n1&quot;&gt;
  15.       &lt;div&gt;Right&lt;/div&gt;
  16.     &lt;/div&gt;
  17. &lt;/div&gt;
  19. &lt;div class=&quot;container&quot;&gt;
  20.     &lt;div class=&quot;n1&quot;&gt;
  21.         &lt;div&gt;Left&lt;/div&gt;
  22.     &lt;/div&gt;
  23.     &lt;div class=&quot;list1&quot;&gt;
  24.         &lt;ul class=&quot;ul-list&quot; style=&quot;width: 285px;&quot;&gt;
  25.             &lt;li class=&quot;list-item&quot;&gt;ONE &lt;/li&gt;
  26.             &lt;li class=&quot;list-item&quot;&gt;TWO&lt;/li&gt;
  27.             &lt;li class=&quot;list-item&quot;&gt;THREE&lt;/li&gt;
  28.             &lt;li class=&quot;list-item&quot;&gt;FOUR&lt;/li&gt;
  29.             &lt;li class=&quot;list-item&quot;&gt;FIVE&lt;/li&gt;
  30.         &lt;/ul&gt;
  31.     &lt;/div&gt;
  32.     &lt;div class=&quot;n1&quot;&gt;
  33.       &lt;div&gt;Right&lt;/div&gt;
  34.     &lt;/div&gt;
  35. &lt;/div&gt;
  37. &lt;div class=&quot;container&quot;&gt;
  38.     &lt;div class=&quot;n1&quot;&gt;
  39.         &lt;div&gt;Left&lt;/div&gt;
  40.     &lt;/div&gt;
  41.     &lt;div class=&quot;list1&quot;&gt;
  42.         &lt;ul class=&quot;ul-list&quot; style=&quot;gap: 1em;&quot;&gt;
  43.             &lt;li class=&quot;list-item&quot;&gt;ONE &lt;/li&gt;
  44.             &lt;li class=&quot;list-item&quot;&gt;TWO&lt;/li&gt;
  45.             &lt;li class=&quot;list-item&quot;&gt;THREE&lt;/li&gt;
  46.             &lt;li class=&quot;list-item&quot;&gt;FOUR&lt;/li&gt;
  47.             &lt;li class=&quot;list-item&quot;&gt;FIVE&lt;/li&gt;
  48.         &lt;/ul&gt;
  49.     &lt;/div&gt;
  50.     &lt;div class=&quot;n1&quot;&gt;
  51.       &lt;div&gt;Right&lt;/div&gt;
  52.     &lt;/div&gt;
  53. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

.ul-list { gap: 10px; }

使用 gap 属性在 flex 项目之间添加间隔。

英文:

.ul-list {
gap: 10px;
}
Use gap property to add spaces between flex items.

huangapple
  • 本文由 发表于 2023年7月20日 13:11:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76726839.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定