如何使外部元素的宽度与其内容的宽度相匹配？

Question

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

基本上，列表项与其样式中的 float：left 位于同一行， div < / strong>的1px边框包围 ul 元素：

唯一的问题是，我必须手动设置外部div的宽度。如果我将宽度设置为较低的值，内容将缩小而不是推开容器div的边框：

有任何建议如何解决这个问题？

Answer 1

将div设置为display: inline-block（并将其放在另一个div中以维护原始div的块状属性