我正在尝试创建一个简单的布局:有些标签必须放在不同的行上,因为没有足够的空间容纳所有标签。 我使用网格来执行此操作。
My code可行,但我更喜欢每个标签都应该在一行上。
现在:
标签 一个非常非常非常长的标签
应该在一行而不是两行。
代码:
.container {
background-color: tomato;
width: 100%;
color: black;
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 5px 5px;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="child">apple</div>
<div class="child">social</div>
<div class="child">cat</div>
<div class="child">computer</div>
<div class="child">table</div>
<div class="child">photograph</div>
<div class="child">future of the world</div>
<div class="child">something</div>
<div class="child">yellow</div>
<div class="child">romance</div>
<div class="child">dictionary</div>
<div class="child">a very very very very long label</div>
</div>
我怎样才能更改我的代码?
在this codepen我使用@Saksham 发布的代码,我只将 text-align
从 center
更改为 left
。
改变窗口大小我明白了:
但我想要这个:
如您所见,dictionary
和非常非常非常长的标签
标签周围的可用空间较少
最佳答案
您可以在列定义中使用 max-content
而不是 auto
- 并针对 container
的溢出进行调整(如果一些屏幕宽度)您可以使用 overflow: auto
- 更改屏幕宽度并检查下面的演示:
.container {
background-color: tomato;
width: 100%;
color: black;
display: grid;
grid-template-columns: repeat(5, max-content); /* added */
grid-gap: 5px 5px;
overflow: auto; /* handle overflow if needed */
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="child">apple</div>
<div class="child">social</div>
<div class="child">cat</div>
<div class="child">computer</div>
<div class="child">table</div>
<div class="child">photograph</div>
<div class="child">future of the world</div>
<div class="child">something</div>
<div class="child">yellow</div>
<div class="child">romance</div>
<div class="child">dictionary</div>
<div class="child">a very very very very long label</div>
</div>
如果你想让列水平共享可用的视口(viewport)空间,你也可以使用 minmax
函数,比如 grid-template-columns: repeat(5, minmax(max-content, 1fr))
:
.container {
background-color: tomato;
width: 100%;
color: black;
display: grid;
grid-template-columns: repeat(5, minmax(max-content, 1fr)); /* added */
grid-gap: 5px 5px;
overflow: auto; /* handle overflow if needed */
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="child">apple</div>
<div class="child">social</div>
<div class="child">cat</div>
<div class="child">computer</div>
<div class="child">table</div>
<div class="child">photograph</div>
<div class="child">future of the world</div>
<div class="child">something</div>
<div class="child">yellow</div>
<div class="child">romance</div>
<div class="child">dictionary</div>
<div class="child">a very very very very long label</div>
</div>
关于html - CSS 网格项总是在一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56307419/