使用浮动图像缩进列表项：问题

Question

我已经找到了几个类似内容的以下问题：How to indent list items using CSS when you have floating blocks?

以下是我的情况：如果列表项太长，以便自动生成换行符，则文本流将继续而不会缩进。

这是我所期待的：

如果文本高度小于图像高度，我可以使用外部位置属性处理此问题，修改li元素的边距或填充。但是，如果文本继续，特别是在图像的底部边界 - 它看起来完全被破坏。

可以在这里找到一个很好的代码：http://csscreator.com/node/30984在第二篇文章中。

任何帮助都将深受赞赏

Answer 1

最明显，最简单的解决方案是清除列表，使其在浮动元素下被强行关闭，而不是与浮动图像共享相同的空间，例如，在此 jsfiddle < / strong>即可。

img {
    float: left;
}

ol {
    clear: both;
}

当然，根据你使用它的情况会有其他问题，但否则它应该解决你的问题。

Answer 2

有两种方法可以执行此操作，其中任何一种方法都可以与您链接的代码示例一起使用。

ul, ol { 
  display: table;  
  list-style-position: inside;
  padding-left: 22px;
}

或

ul, ol { 
  overflow: hidden;  
  list-style-position: inside;
  padding-left: 22px;
}

有一些细微的差别，比如溢出：隐藏不允许你弹出工具提示而不被切断，但这里没什么大不了的。

不确定2010年是否全部都可以使用，但这是我住的地方（未来）。