CSS：寬度爲「inline」的顯示元素

我有一個圖標，我希望能夠在任意點放入文本並使其與文本「流動」。CSS：寬度爲「inline」的顯示元素

背景：

的<img>標籤最適合這個。不過，我不想在任何地方都指定href。如果圖標/位置發生變化，那麼將來會出現問題。這也取決於我知道圖像的路徑，我不會總是知道由於URL重寫和不同的映射到同一頁面等我想要做一些像，並有我的圖標作爲background-image。當然，這是行不通的，因爲你不能在內聯元素上使用寬度。將它作爲一個塊（即<div>）元素不起作用（出於顯而易見的原因）並且浮動它也不起作用。 display: inline-block;適用於某些瀏覽器，但不是全部。使用padding:填充正確的高度和寬度會在不同的瀏覽器中產生混合效果。 href和背景圖片使用<img>標籤與透明圖像工作，但似乎hacky。

有關完成此操作的最佳方法的任何想法是？

來源

2010-08-03 Josh Johnson

你可以使絕對定位你的鏈接中，像這樣：

<a href="">Some text <span class="icon"></span></a>

您可以絕對定位的元素指定寬度/高度，所以CSS會是這個樣子：

a { 
    position: relative; 
    padding-right: 30px; /* width of your icon, assuming you're placing to the right of the text */ 
} 

a .icon { 
    display: block; /* for good measure, but won't be required in all browsers */ 
    position: absolute; 
    top: 0; 
    right: 0; 

    width: 30px; 
    height: 30px; 

    background: url(your-icon.png) no-repeat 0 0; 
}

通過將<a>的位置設置爲相對位置，它使其成爲絕對定位的的座標系。

使用圖片代碼爲圖標

如果你不知道在哪裏會出現圖標，你可以使用<img>標籤有透明的.gif注意其來源。

<p>Lorem ipsum <img src="clear.gif" alt="icon" class="icon" /> dolar velarium</p>

然後使用CSS背景屬性設置真正的圖標來源：

img.icon { 
    height: 30px; 
    width: 30px; 
    background: url(true-icon-src.png) no-repeat 0 0; 

    /* Use the following if you want to adjust the image's vertical position */ 
    position: relative; 
    top: 5px; 
}

來源

2010-08-03 16:52:58 Pat

不幸的是，這不會對我工作，因爲我永遠不知道圖標可能在哪裏。它可能在鏈接的末尾或段落的中間等） – 2010-08-03 16:58:13

在這種情況下，''圖標的標籤是您最好的選擇。它們是最一致的內嵌塊元素。作爲黑客，你可以給圖像一個1px透明的.gif'src'，然後使用CSS背景圖像設置真正的圖標圖像。這樣，你就不會在你擔心的標記中擁有硬編碼的src屬性。 – Pat 2010-08-03 17:15:07

再次感謝，帕特。我在我原來的問題中提到過這是迄今爲止最好的解決方案。我只是希望有一個更簡單，更乾淨，不太古怪的感覺方式（閱讀：沒有爲插入每個圖標打太多，因爲我很懶）。 – 2010-08-03 18:33:10

這可能看起來有點劈十歲上下，但你可以使用background-image與font-size和觸摸板您span有足夠的非打破空間顯示圖像。

<span style="background-image:url('icon.gif'); width:200px; font-size: 36pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

承認它不會是你需要的確切大小，但有一點點飛揚，你可以找到一個合適的結果。

來源

2010-08-03 17:05:48

你是對的。這是醜陋:)我希望有一個優雅的解決方案。但它看起來像我可能會選擇此或技巧。 – 2010-08-03 19:06:19

是的。實際上，我用'img'標籤提出了Josh的答案。這會讓您更好地控制圖標的大小。 – 2010-08-04 00:36:30

CSS：寬度爲「inline」的顯示元素

回答

相關問題