如果有浮动块，如何使用CSS缩进列表项？

Question

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

为什么会发生这种情况，我可以解决这个问题吗？

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

Answer 1

只需添加ul { list-style-position: inside; }，因为默认设置为外部，不确定原因。

Answer 2

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

Answer 3

我设法挖掘的一些事情的组合答案，以使这项工作。

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

<强> LESS：

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

Answer 4

这对我有用，来自：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]-->

Answer 5

在ul元素上，您可以使用overflow: hidden;使显示更像是一个框而不是仅是文本，并且可以使用padding-left: 1em;从左侧推动它。

.image {
  float: left;
  width: 50%;
  height: 200px;
  background-color: gray;
  margin-right: 20px;
  margin-bottom: 20px;
}

ul {
  padding-left: 1em;
  overflow: hidden;
}

<div class="image"></div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales sodales facilisis. Ut a risus vitae massa scelerisque elementum. Quisque finibus posuere tempus. Suspendisse rutrum quam faucibus, tincidunt neque vitae, porttitor urna.
</p>

<ul>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
  <li>Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus.</li>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
</ul>

<p>
Nunc vulputate libero vel molestie dapibus. Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue. Curabitur ut tincidunt justo, nec mattis diam. Praesent suscipit scelerisque enim, at aliquet diam accumsan ut. Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus. Etiam vel libero scelerisque, bibendum massa sit amet, fringilla odio. Nam eu sem massa.
</p>