html - 使用 CSS 的流体宽度 HTML 列表项

Question

是否可以创建一个具有背景图像的流体宽度 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 根据内容自动调整。

Answer 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 个 div 的背景。只需调整尺寸，使其适合您想要的输出。

希望对您有所帮助，阿林