使用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的背景。只需调整尺寸，使其适合您所需的输出。

希望这有帮助， 阿林