我怎样才能有一个段落一样的显示在css与不同的孩子在一个div

tcbh2hod  于 2023-05-08  发布在  其他
关注(0)|答案(2)|浏览(169)

我现在有这个:

但我想做到这一点:

有没有一种方法可以通过保持相同的HTML结构来实现?下面是示例代码:

.container {
  display: flex;
  /* Makes the container an inline block element */
  vertical-align: top;
  /* Aligns the top edge of the container with the top edge of the previous element */
  width: 600px;
}

label {
  background-color: #8ff;
  display: inline-block;
  /* Makes the label element an inline block element */
}

.content-wrapper {
  background-color: #f8f;
  display: flex;
  /* Makes the content-wrapper an inline block element */
  flex-wrap: wrap;
  white-space: nowrap;
  /* Prevents the content from wrapping to the next line */
  overflow-x: auto;
  /* Allows horizontal scrolling if the content overflows */
}

span {
  display: inline-block;
  /* Makes the child elements inline block elements */
  margin-right: 10px;
  /* Add some spacing between the child elements */
}
<div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>

我试过使用flex,grid,但是都不管用,它可以在div里面使用标签,但是我不喜欢使用这种方法,或者把它作为最后的资源

unftdfkk

unftdfkk1#

你并不需要很多代码。只需将 Package 器设置为内联元素即可。

.container {
  background-color: #f8f;
  width: 600px;
}

label {
  background-color: #8ff; 
}

.content-wrapper {
  display: inline;
}

span {
  margin-right: 10px; /* Add some spacing between the child elements */
}
<div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>
rqcrx0a6

rqcrx0a62#

下面是使用display: contents;的一种可能方法

.container {
  display: flex;
  width: 600px;
  flex-wrap: wrap;
  background-color: #f8f;
}

label {
  background-color: #8ff;
  display: inline-block;
}

.content-wrapper {
  display: contents;
}

span {
  display: inline-block;
  margin-right: 10px;
}
<div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>

相关问题