使用 CSS 的流体宽度 HTML 列表项答案

【问题标题】：Fluid width HTML list item using CSS使用 CSS 的流体宽度 HTML 列表项
【发布时间】：2014-04-10 03:19:21
【问题描述】：

是否可以使用背景图像创建流体宽度 LI，根据内容调整其大小并且不遵循父 DIV 的宽度。

如果可能，仅使用 CSS。

<div id="navbody">
    <!--Button Start-->
    <ul id="button">
        <li>
            Home
            <div class="btnright"></div>
        </li>
        <li>
            About Us
            <div class="btnright"></div>
        </li>
    </ul>
    <!--Button End-->
</div>

LI 包含背景：

注意：这是一个不规则的左侧形状

然后用一个DIV来结束不规则的右边形状

菜单包含在具有固定宽度的父 div 中 []

[[首页][关于我们]]

如您所见，我希望 LI 根据内容自动调整。

【问题讨论】：

标签： html css

【解决方案1】：

哦。在您发布代码示例之前，我无法正确理解您的问题。

这是一个模型：

<div style="width: 500px;border: 1px solid Blue;">
    <ul style="padding-left:0;margin-left:0;">
        <li style="list-style-type: none;">
            <div style="float:left; height:24px;width:20px;background-color:Green;"></div>
            <div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
            <div style="float:left; height:24px;width:20px;background-color:Red;"></div>
            <div style="clear:both;">
        </li>
        <li style="list-style-type: none;">
            <div style="float:left; height:24px;width:20px;background-color:Green;"></div>
            <div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
            <div style="float:left; height:24px;width:20px;background-color:Red;"></div>
            <div style="clear:both;">
        </li>
    </ul>
</div>

绿色的 div 是图像的左侧部分，红色的部分是图像的右侧部分，黄色的部分是图像的重复中心。为此，您应该将图像分成这 3 个部分，并将它们添加为 3 个divs 的背景。只需调整尺寸以使其适合您所需的输出。

希望这会有所帮助，阿林

【讨论】：

您好，您能否进一步解释一下。我不明白。谢谢
你应该添加更多的细节，也许还有一些你现在拥有的和你想要实现的代码。
根据需要添加边距和内边距；）。
不是最好的解决方案，但有效。所以我给你的功劳。虽然我决定在 li 标签中使用链接，并且在不使用 div 的情况下实现了相同的想法