Как сделать так, чтобы ширина внешнего элемента соответствовала ширине его содержимого?

Question

<div>
    <ul>
        <li>Caption1</li>
        <li>Caption2</li>
        <li>Caption3</li>
        <li>Caption4</li>
    </ul>
</div>

Как правило, элементы списка располагаются на одной строке с с плавающей точкой: слева в их стиле и div имеет граница 1px, которая окружает элемент ul :

Единственная проблема, я должен установить ширину внешнего div вручную. Если я установлю ширину на более низкое значение, содержимое будет уменьшаться вместо того, чтобы отталкивать границу контейнера div:

Есть предложения как это исправить?

Answer 1

Установите для div значение display: inline-block (и поместите его в другой div, чтобы сохранить исходные div блочные атрибуты)