代码之家 › 专栏 › 技术社区 › Aivan Monceller

使用CSS的Fluid Width HTML列表项

css html

Aivan Monceller · 技术社区 · 15 年前

是否可以创建一个具有背景图像的流体宽度li,该图像根据内容调整其大小,并且不跟随父分区的宽度。

如果可能的话,只使用CSS。

<div id=“navbody”>
&!--按钮开始-->
<ul id=“button”>
L>
家
<DIV class=“btnright”></DIV>
&L./L>
L>
关于我们
<DIV class=“btnright”></DIV>
&L./L>
&L/UL & GT;
&!--按钮结束-->
&L/DIV & GT;
< /代码> 

li包含背景:



注意:这是一个不规则的左边形状

然后用DIV结束不规则的右侧形状

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

[家][关于我们]]

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

如果可能,只使用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中。
[答]

[家][关于我们]]

如你所见,我希望李的根据内容自动调整。

1 回复 | 直到 12 年前

Alin P. 15 年前

哦。直到您发布代码示例,我才正确理解您的问题。

这是一个模型:

<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>

绿色部分是图像的左侧,红色部分是图像的右侧,黄色部分是图像的重复中心。要做到这一点,您应该将图像分割成这三个部分,并将它们添加为3的背景。 div 只需调整尺寸,使其符合您的期望输出。

希望这有帮助, 阿林

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前