右對齊列表項中的一些文本

我有一個嵌套的無序列表，其中包含左側的主要內容，我想添加右側浮動的選項，以便它們在右側對齊，而不管縮進。右對齊列表項中的一些文本

<ul> 
<li> Item 1 <span class='options'> link </span> </li> 
<li> Item 2 <span class='options'> link </span> 
    <ul> 
    <li>Item 3 <span class='options'> link </span> </li> 
    </ul> 
</li> 
</ul>

我有以下的CSS：

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
} 

.options { 
    float: right; 
    width: 50px; 
}

當這不過使用的選項跨度右對齊，但料線低於1線。

我怎樣才能得到選項跨度列表項目？

TIA，亞當

來源

2009-07-27 apchester

你有一個問題你的線寬。＃1，＃2和＃3在瀏覽器中的寬度不一致，因爲邊距和填充的工作方式。 – Alsciende 2009-07-27 13:31:02

而是浮動的，你可以試試絕對定位。

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
    position: relative; 
} 

.options { 
    width: 50px; 
    position: absolute; 
    right: 0px; 
}

來源

2009-07-27 13:25:39 Alsciende

完美的這幫了我一個禮物。我現在很挑剔，但對於您的解決方案，相當新的解決方案是將「px」從最終的「0」中刪除，以獲得最佳做法。 – Pete 2011-03-08 16:56:55

使用這個CSS：

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width:400px; 
} 
.options { 
    float: right; 
    width: 50px; 
} 
li li { width:385px}

這不幸的是需要你定義一個寬度減去填充。取決於你的靈活性，這將工作。在Chrome 3.0中測試。

來源

2009-07-27 13:50:25

哼，你解決了一個邊緣問題，而不是主要問題:)。在IE6下試試你的CSS。 – Alsciende 2009-07-27 13:55:18

如果修改HTML代碼是OK，你可以在第一跨度附上「項目1」和：

浮動爲左（仍浮可供選項右側）
上使用display: inline-block這兩個跨度和text-align: right，而不是浮在可供選項，（與FX2沒有兼容的，雖然，只有在IE6/7，因爲跨度是默認的內聯元素的工作。不會與DIV工作）

來源

2009-07-27 14:30:28 FelipeAls

右對齊列表項中的一些文本

回答

相關問題