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

tcbh2hod 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(168)

我现在有这个：

但我想做到这一点：

有没有一种方法可以通过保持相同的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里面使用标签，但是我不喜欢使用这种方法，或者把它作为最后的资源

css

来源：https://stackoverflow.com/questions/76165312/how-can-i-have-a-paragraph-like-display-in-css-with-different-children-inside-a

2条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-08

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>

赞(0）回复(0）举报 2023-05-08

我来回答

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

2条答案

相关问题

热门标签

最新问答