css - float 元素旁边的列表 : How to get list items in the right place?

Question

这个 fiddle 展示了基本问题: http://jsfiddle.net/boldewyn/Qvfgv/

在主流程中有一个 float 元素，旁边是一个列表。列表项延伸到 float 元素的空间。

解决方法是使用 overflow: hidden在 <ul> 上.但是随后列表不再围绕 div “流动”，而是始终保持在右侧，这对于 float 元素下方的所有空白区域来说都是不希望的。

我在找什么:

• 列表应该围绕 float block float ，列表项应该远离 float block 的区域。或者单例也可以 <li>要向右推送的元素(例如，通过 overflow: hidden )。

• 没有背景图片或 JavaScript 的纯 CSS 解决方案。这是用于打印预览页面的，必须另外针对没有 JavaScript 和低至 IE7 的用户进行定制。

• 列表元素符号应在左侧扩展，就像浏览器的默认设置一样。这意味着， float 元素旁边的列表项应该获得额外的空间以将元素符号放入其中。

什么不起作用:

• 使用背景图像，我可以为各个列表项提供填充并进行设置。但这不够可靠，因为页面的意图是打印。

• 我不知道 float 元素的确切宽度或高度。如果我这样做了，我可以用 li { margin-left: "floated-element's width" + 20px; } 解决问题.

• 我尝试了一些 text-indent 的组合, list-style-position等等，但未能提出有用的解决方案。

很可能没有针对此的纯 CSS 解决方案。在告诉客户这是不可能的之前，这个问题实际上是我最后的手段。

Answer 1

是this你在追求什么？

我刚刚将 block 的 margin-right 从 10px 增加到 30px。

编辑

我想我已经得到了你想要的效果，但它对你的需求来说可能有点太老套了 - jsFiddle