CSS 讓 li 寬度自適應內容：float + width:auto 技巧

核心 CSS

li {
    background-color: red;
    width: auto;      /* 關鍵：寬度由內容撐開 */
    float: left;      /* 關鍵：脫離文檔流，收縮包裹 */
    /* 也可用 display: inline-block; */
}

完整示例

<style>
    li { background-color:red; width:auto; float:left; margin-right:10px; padding:5px 10px; }
</style>
<body>
    <li>abcdefg</li>
    <li>abc</li>
    <li>abcdefghijkn</li>
</body>

原理解析

float:left 或 display:inline-block 會使元素生成「收縮包裹」盒模型，寬度由內容決定。配合 width:auto（默認值）即可實現自適應。