gpt4 book ai didi

html - Tailwind (CSS Grid) 每个网格元素的大小相同

转载 作者:行者123 更新时间:2023-12-05 06:57:11 26 4
gpt4 key购买 nike

我想写一个带有一些输入字段的公式。我使用 Tailwind 2 和新的网格系统。

我想要一个 3 列公式 (grid-cols-3)在第二行,我有一个 col-span-2 以超过 2 列,因为我想在那里放置一个更大的文本区域。输入大小的标签每次都用 w-1/2 定义。当我有一个 colspan 2 时,我想我可以简单地将标签的宽度更改为 w-1/4,将文本框更改为 w-3/4,因此标签的大小必须与所有其他标签的大小相同,只有输入必须有一个更大的尺寸。我究竟做错了什么? w-1/4 的标签比另一个大 2 个像素。

这里我有一个代码示例的链接。 https://play.tailwindcss.com/IqYsmfxpwJ

      <div class="">
<h1>InfoBox</h1>
<div class="grid grid-cols-3 gap-2">
<div class="">
<lable class="inline-block w-1/2">One</lable><input class="w-1/2 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Two</lable><input class="w-1/2 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Tree</lable><input class="w-1/2 border">
</div>
<div class="col-span-2">
<lable class="inline-block w-1/4">Four</lable><input class="w-3/4 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Five</lable><input class="w-1/2 border">
</div>
</div>
</div>
`

最佳答案

当然宽度不会保持不变。当您组合两个网格时,它们之间的间隙会包含在新的更大部分中。因此,该部分的宽度将是较小部分的两倍加上它们之间的间隙。结果,标签的宽度会变得比原来的要大。

也许这样的东西更适合你:

<div class="">
<h1>InfoBox</h1>
<div class="grid grid-cols-3 gap-2">
<div class="flex">
<lable class="inline-block w-20 flex-none">One</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Two</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Tree</lable><input class="w-full border">
</div>
<div class="flex col-span-2">
<lable class="inline-block w-20 flex-none">Four</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Five</lable><input class="w-full border">
</div>
</div>
</div>

enter image description here

关于html - Tailwind (CSS Grid) 每个网格元素的大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64949286/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com