浮動元素旁邊的列表：如何在正確的位置獲取列表項？

Question

這個小提琴顯示了基本問題： http ： //jsfiddle.net/boldewyn/Qvfgv/

有一個浮動元素，旁邊是主流中的列表。 列表項擴展到浮動元素的空間。

解決方法是使用overflow: hidden在<ul> 。 但是然后列表不再在div周圍“流動”，而是始終保持在右側，這對於浮動元素下方的所有空白區域都是不希望的。

列表應該浮動在浮動塊周圍，列表項應該保持在浮動塊的區域之外。 另外，單個<li>元素可以向右推（例如，通過overflow: hidden ）是可以的。
沒有背景圖像或JavaScript的純CSS解決方案。 這是一個打印預覽頁面，必須另外為沒有JavaScript和IE7的用戶量身定制。
列表項目符號應在左側縮進，就像瀏覽器的默認值一樣。 這意味着，浮動元素旁邊的列表項應該獲得額外的空間，以便將子彈放入其中。

使用背景圖像我可以給各個列表項填充並將被設置。 但這還不夠可靠，因為要打印頁面的意圖。
我不知道浮動元素的確切寬度或高度。 如果我這樣做，我可以用li { margin-left: "floated-element's width" + 20px; } li { margin-left: "floated-element's width" + 20px; } 。
我用text-indent ， list-style-position等組合進行了一些實驗，但是還沒有能夠提出有用的解決方案。

很可能，沒有針對此的CSS解決方案。 在告訴客戶這是不可能的之前，這個問題實際上是我的最后一招。

Answer 1

這就是你要追求的嗎？

我剛剛將塊的margin-right從10px增加到30px 。

編輯

我想我已經得到了你想要的效果，但對你的需求來說可能有點過於苛刻 - jsFiddle

Answer 2

position: relative; 是我發現的最佳解決方案，只需確保在右側添加填充或邊距以補償偏移。 這適用於設置為inside或outside list-style-position 。 您只需相應地調整偏移量即可。

ul {
  position: relative;
  left: 3em;
  margin-right: 3em;
}

Answer 3

我同意TomWardrop的觀點，我發現最好的解決方案是確保嵌套列表縮進在浮動元素旁邊是否一致是重置填充並使用左設置的相對定位。

ul {
  position: relative;
  padding-left:0;
  margin-left:0;
  left: 1em;
}

更新。

如果只想在嵌套列表中使用插入，並保持第一級與段落內聯。 對於ul css聲明，將左側設置為0，然后：

ul ul {
  left:1em;
}

Answer 4

列表項目子彈通常似乎比他們應該更進一步。 答案很簡單：在<li>添加一些左邊距或向<ul>添加左邊距。 這將把一切都轉移到右邊。

我通常在使用CSS重置的站點中看到此行為，因為ul,li {margin:0;padding:0}將給出您所看到的行為。 事實上你的小提琴做到了這一點：

ul {
  margin: 0;
  padding: 0 0 0 20px;
}

li {
  margin: 0;
  padding: 0;
}

所以，是的，你實際上是將文本與左邊緣對齊，而不是通過邊緣的子彈（這是我想的某種CSS怪癖）。 在你的情況下，你有一個20px的左邊填充ul但似乎不夠，嘗試把它放在li或使用邊距。