CSS的float移動含量下降

我有3個簡單的文本情況如下：

<div style="border: 1px solid #000;"> 
    <a href="#" style="">Text1</a> 
    <a href="#" style="">Text2</a> 
    <a href="#" style="float: right">Text3</a> 
</div>

在IE8，火狐（23）檢查這一點，因爲預期Text3鏈接對齊正確的。當我添加邊框鏈接，Text3一個像素（邊框的大小）

<div style="border: 1px solid #000;"> 
    <a href="#" style="border: 1px solid #000;" href="#" >Text1</a> 
    <a href="#" style="border: 1px solid #000;">Text2</a> 
    <a href="#" style="border: 1px solid #000; float: right" href="#">Text3</a> 
</div>

現在，如果我嘗試添加填充到鏈接滴下來，Text3落下更遠（12個像素填充+ 1個像素的邊框）

<div style="padding: 20px 20px 20px 20px; border: 1px solid #000;"> 
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text1</a> 
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text2</a> 
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000; float: right">Text3</a> 
</div>

問題浮動的元件，填充和邊界大小被忽略，並且元件的實際位置時使用它似乎。我有一個多主題網頁。用戶可以從jQuery UI Theme roller 中選擇任意主題在這些主題中，我用於項目的樣式具有不同的填充大小（和字體大小），這使得無法在CSS中硬編碼特定值以使它們保持同一行。

問題這種行爲是否可以避免（我做錯了）？有沒有一種解決方法，使這些鏈接保持在同一行（最好只有CSS）？

來源

2014-02-21 AaA

如果您將其他a元素設置爲display: inline-block，則它們的行爲都將相同。例如。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

a {display: inline-block; padding: 12px;} 

</style> 
</head> 
<body> 

<div style="border: 1px solid #000;"> 
    <a href="#" style="">Text1</a> 
    <a href="#" style="">Text2</a> 
    <a href="#" style="float: right">Text3</a> 
</div> 

</body> 
</html>

來源

2014-02-21 03:50:22

謝謝，你的回答解決了它 – AaA

CSS的float移動含量下降

回答

相關問題