代码之家 › 专栏 › 技术社区 › sorin

有浮动块时如何使用CSS缩进列表项?

html-lists css

sorin · 技术社区 · 15 年前

在文档中使用浮动图像时,我观察到了一种相对奇怪的行为。列表项缩进相对于“红线”而不是“绿色”缩进。

为什么会这样,我能解决这个问题吗?

<img style=“float:left”>
<P>一些文本</P>
& UL & GT;
<li>AAA</li
<li>bbb</li
&L/UL & GT;
<P>其他文本</P>
< /代码> 

文档中的图像。列表项缩进相对于“红线”而不是“绿色”缩进。

为什么会这样,我能解决这个问题吗?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>

4 回复 | 直到 10 年前

bogdan 15 年前

只要添加 ul { list-style-position: inside; } 因为默认情况下它设置为“外部”,不知道为什么。

Skilldrick 15 年前

我想你可能需要 change the list style position to inside .

adamj 11 年前

结合几个问题的答案,我设法挖掘,使这项工作。

HTML:

<div>
    <img src="bleh.jpg">
    <ul>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
    </ul>
</div>

较少:

img {
    float: left;
}

ul {
    list-style-position: inside;

    li {
        position: relative;
            left: 1em;
        margin-bottom: 1em; margin-left: -1em;
            padding-left: 1em;
        text-indent: -1em;
    }
}

Gareth Hayter 10 年前

这对我很有用,从: http://enarion.net/news/2012/css-perfect-indented-line-ulli-around-a-floating-image/

Chrome、Firefox等:

ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }

Internet Explorer:

<!--[if IE]>
   <style>ul li {margin-left: 19px; text-indent: -18px; }</style>
<![endif]-->

推荐文章

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

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前