與浮箱

Question

需要什麼樣的CSS創建這樣的HTML佈局HTML佈局幫助：

 
+--[li]---------------------------------------------+ 
|+--[div]-------------------------------------++---+| 
|| A label with some text, truncate if necess…||BOX|| 
|+--------------------------------------------++---+| 
|+--[div]------------------------------------------+| 
|| Another label, truncate if necessary   || 
|+-------------------------------------------------+| 
+---------------------------------------------------+ 

• 外<li>固定寬度，浮留下了列表中的其他列表項目
• BOX應該向右浮動，在上方<div>之上，它只包含兩個字母
• <div> s中的文本都不應該包裝，應該隱藏溢出
• 整個事情在IE7應該工作Quirks模式，最好是

目前我有：

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;"> 
    <div style="float: right;">XX</div> 
    <div>A label with some text, truncate if necessary</div> 
    <div>Another label, truncate if necessary</div> 
</li> 

但我不能得到BOX懸停在第一個標籤。

Answer 1

這是因爲右浮動DIV不能漂浮nonwrappable文本。

試試這個

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden; position: relative;"> 
    <div style="position: absolute; right: 0px; background-color: #FFFFFF;">XX</div> 
    <div>A label with some text, truncate if necessary</div> 
    <div>Another label, truncate if necessary</div> 
</li> 

如果這就是你想要的東西。

Answer 2

您是否嘗試過float: left的第一個標籤？

順便說一句，Firebug將幫助你在調試中有很多...

Answer 3

這是預期的結果嗎？

alt text http://img51.imageshack.us/img51/6603/boxf.jpg

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;"> 
    <div style="float: right; position: relative; background-color: red;">BOX</div> 
    <div>A label with some text, truncate if necessary</div> 
    <div>Another label, truncate if necessary</div> 
</li> 

省略position: relative，你會得到：

alt text http://img360.imageshack.us/img360/7205/box2.jpg