使用Tailwind Grid时元素宽度均继承首个元素宽度的问题

问题根源 #

1. 每个按钮都被包裹在独立的Grid容器中，且通过position: relative+固定偏移量定位，导致所有元素重叠，容器宽度被第一个最长元素撑开后，后续容器直接继承该宽度。
2. .dugme未设置宽度自适应规则，默认会填满父容器的可用宽度。

修正代码 #

CSS 部分

.float-right{
  position: relative;
  top: 45vh;
  left: 69.5vh;
}

.dugme{
    background-color: #3e3e3fbf;
    border-radius: 5px;
    border: 1px solid #222223;
    height: 3vh;
    max-height: 3vh;
    margin-top: 1vh;
    padding: 0 1vh;
    color: white;
    width: fit-content; /* 让宽度自适应内容长度 */
    display: flex;
    align-items: center;
    gap: 0.5vh; /* 调整文本与右侧字母C的间距 */
}

HTML 部分

<div class="float-right">
    <!-- 所有按钮放入同一个Grid容器，实现垂直排列 -->
    <div class="grid grid-flow-row auto-rows-max">
        <div class="dugme font-light">Elementttttttttttttttttttttt<span class="dugme-slovo font-bold">C</span></div>
        <div class="dugme font-light">Element<span class="dugme-slovo font-bold">C</span></div>
        <div class="dugme font-light">Element<span class="dugme-slovo font-bold">C</span></div>
        <div class="dugme font-light">Elementtttt<span class="dugme-slovo font-bold">C</span></div>
    </div>
</div>

核心修改说明 #

• 移除冗余的独立Grid容器和.dugme-float类，将所有按钮统一放入一个Grid容器，利用Tailwind的grid-flow-row实现垂直排列。
• 给.dugme添加width: fit-content，让每个按钮的宽度随自身文本长度自动调整。
• 将.dugme-slovo从<div>改为<span>（或保留<div>并设置display: inline-block），配合flex布局让文本与右侧字母C在同一行对齐。
• 统一父容器的定位规则，避免多个按钮元素重叠。

内容的提问来源于stack exchange，提问作者Swirls