如何让一张卡片的大小根据其内的内容来调整？

Question

目前我有一个可折叠的，一旦点击就会出现一个卡片。在这个卡片中，我有一个包含一组元素的段落标签。然而，就目前而言，这个卡片是一个固定的大小。如果可能的话，我希望根据段落标签和其中所有元素的大小调整卡片的宽度。因此，它将防止段落标签内的任何元素进入第二行。相反，卡片的宽度会相应地增加或减少。

这是我的HTML，包含了这个卡片。

<div class="collapse" id="@target">
      <div class="card card-body w-25 p-3 collapsible cardCollapsible" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]">
            <p class="paragraphStyling">
                <input type="checkbox" id="itemCheck" /> @dataLineItem.Split(Model.CategoryList.delimiterChar)[0] <button class="btn"><i class="fas fa-trash tertiaryDeleteIcon"></i></button> <button class="btn"><i class="fas fa-edit tertiaryEditIcon"></i></button>
            </p>
      </div>
</div>

这是目前我为卡片本身设计的CSS。

.cardCollapsible 
{
    margin-top: 20px;
}

我想让卡片在页面中居中，所以最终卡片的宽度会向左右两边调整。

Answer 1

我设法通过一个非常简单的，而且很可能是非常明显的修复方法来解决这个问题，我只需要从卡片本身的类定义中删除 "w-25"。

在卡片的CSS中，我使用了width: auto，这样可以动态调整卡片的宽度。

在下面找到用于将卡片的段落内容居中以及动态扩展其大小的CSS。

.cardCollapsible {
    margin-top: 20px;
    width: auto;
    height: 100px;
    display: table;
}

.paragraphStyling {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

希望能帮到想做同样事情的人!