Как настроить размер карты в зависимости от содержимого, размещенного в ней?

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;
}

Надеюсь, это поможет любому, кто хочет сделать то же самое!