無論文字長度如何定位圖像在最右側

我希望將圖像定位在200px跨度的最右側。相反，它位於「hello」文本的末尾，由於「hello」短於200px，因此它不在200px跨度的最右側。無論文字長度如何定位圖像在最右側

<span>Hello</span> 

span { 
    background-image: url("image.gif"); 
    background-position:right center; 
    background-repeat: no-repeat; 
    min-width: 200px; 
    width: 200px; 
}

來源

2012-11-01 user1032531

您是否研究過預設跨度的元素類型？我猜不會。它是一個內聯元素。這意味着設置寬度沒有影響，元素的寬度是內容的寬度。設置顯示來阻止。 –

但是，如果我將它設置爲阻止，那麼相鄰的元素將不會出現內聯 – user1032531

肯定不會。你必須在某個地方做出決定你想要什麼樣的元素（用它的特性）。如果你使用html5和css3，你也可以設置顯示爲內嵌塊。那麼它有你的效果。但它不適用於較舊的ie版本 –

您無法在span-anline元素上設置寬度。

將其設置爲display: inline-block，它會工作。

來源

2012-11-01 14:55:52 bookcasey

完美！謝謝 – user1032531

如果您的設計允許，我會嘗試使顯示=塊。

span { 
    display:block; 
    background-image: url("image.gif"); 
    background-position:right center; 
    background-repeat: no-repeat; 
    min-width: 200px; 
    width: 200px;}

我認爲你可能必須這樣做才能讓SPAN尊重寬度。不幸的是，它會將下一組元素踢到下一行。

來源

2012-11-01 14:53:51 CSharpConductor

從我可以看到那裏似乎沒有一個理由保持在200px跨度。如何在右邊添加一些與圖片大小相同的填充，再加上一點？例如，如果你的Image.gif的是16像素寬，然後執行：

padding-right:20px;

，擺脫寬度和最小寬度。這樣您就不必亂七八糟的顯示和瀏覽器兼容性問題。

來源

2012-11-01 15:01:49

好主意。我認爲這對我有用。我認爲這是最好的答案，但bookcasey's是正確的答案（如果這有什麼意義:)） – user1032531

無論文字長度如何定位圖像在最右側

回答

相關問題