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

【问题标题】：How to make the outer element's width match the width of its contents?如何使外部元素的宽度与其内容的宽度相匹配？
【发布时间】：2012-03-28 05:56:09
【问题描述】：

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

基本上，列表项与样式中的 float:left 和 div 有一个环绕 ul 元素的 1px 边框：

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

有什么建议可以解决这个问题吗？

【问题讨论】：

【解决方案1】：

将div 设置为具有display: inline-block（并将其放在另一个div 中以保持原始div 的块状属性）

【讨论】：