如何避免在Flexbox中使用DaisyUI按钮时撑满整行宽度？

你的代码如下：

<div className="flex flex-col p-3">
    <div className="flex flex-col  mb-4">
        <button className="btn btn-link btn-sm">Statistik anzeigen</button>
        <button className="btn btn-link btn-sm">Schadenskategorien hinzufügen</button>
        <button className="btn btn-link btn-sm">CSV der aktuellen Auswahl exportieren</button>
    </div>
 </div>

问题根源有两点：

1. 内层的flex flex-col容器默认align-items: stretch，会强制子元素（按钮）拉伸至容器全宽
2. 你的btn类可能自带了width: 100%的样式，导致单独加w-auto会被覆盖

两种可行解决方法： #

方法一：修改容器对齐方式

给内层 flex 容器添加items-start类，让所有子元素按自身宽度排列：

<div className="flex flex-col p-3">
    <div className="flex flex-col items-start mb-4">
        <button className="btn btn-link btn-sm">Statistik anzeigen</button>
        <button className="btn btn-link btn-sm">Schadenskategorien hinzufügen</button>
        <button className="btn btn-link btn-sm">CSV der aktuellen Auswahl exportieren</button>
    </div>
 </div>

方法二：单独设置按钮样式

给每个按钮添加self-start脱离拉伸对齐，同时用!w-auto强制覆盖btn类的宽度样式：

<div className="flex flex-col p-3">
    <div className="flex flex-col mb-4">
        <button className="btn btn-link btn-sm self-start !w-auto">Statistik anzeigen</button>
        <button className="btn btn-link btn-sm self-start !w-auto">Schadenskategorien hinzufügen</button>
        <button className="btn btn-link btn-sm self-start !w-auto">CSV der aktuellen Auswahl exportieren</button>
    </div>
 </div>

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