嵌入塊內部位置：絕對元素

我的問題很簡單：在絕對定位的元素內嵌入塊元素會發生什麼？我有一個小例子來說明我的意思。否則很難解釋。現在的問題是，爲什麼.icon內.tag的不定位像以前.icon（即在線和文本的右邊）嵌入塊內部位置：絕對元素

<html> 
<head> 
    <style> 
     .field { position: relative; border: 2px solid black;} 
     .tag { position: absolute; left: 100%; top: -2px; background: black; color: white;} 
     .icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;} 
    </style> 
</head> 
<body> 
    <a>Some text <span class='icon'>X</span> </a> 
    <h2> 
     <span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span> 
    </h2> 
    <h2> 
     <span class='field'>Some Text</span> 
    </h2>  
</body> 
</html>

來源

2011-04-09 noio

這可能是因爲您未關閉所有跨度。此行缺少一個： <跨度類= '場'>某些文本<跨度類= '標籤'>標記的 X – Thorgeir 2011-04-09 17:00:35

良好的觀察，這沒有解決但問題。我認爲Chrome瀏覽器很聰明，可以在看到''時關閉該標籤。 – noio 2011-04-09 18:30:47

您可以嘗試爲.tag定義寬度，以確保它不會環繞。 – tkm256 2011-04-09 18:36:30

其實，圖標的作用完全一樣。爲了測試，嘗試的樣式設置爲

display: inline-block; width: 50px;

當你犯了一個標籤的位置是：絕對的，它會導致標籤不再有其父的100％自動寬度，而是具有最小寬度它可以根據瀏覽器內的啓發式（取決於瀏覽器）。內聯塊像圖像一樣「內聯」，因此在第一次機會（即在「標籤」單詞後面）被包裝到下一行。

所以簡短的答案是：圖標的行爲相同，但包含它的塊不是。

爲了強制圖標在同一行上，就像第一行一樣，您可以添加white-space: pre;。請參閱：http://jsbin.com/itole4/6（見下文評論）

來源

2011-04-09 18:38:43 Sajid

謝謝！我不知道這個「位置：絕對」與寬度無關。有沒有辦法讓'.icon'顯示在「tag」旁邊，而不將寬度設置爲固定大小？ – noio 2011-04-09 19:58:32

是的，你可以做「[空格]（https://developer.mozilla.org/en/CSS/white-space）：pre;」強制阻止換行符，除了
標記。顯然，這會阻止你保持文本流暢。另一種方法可能是將標籤和圖標包裝在白色空間設置爲預先設置的範圍內，然後將白色空間設置爲預先設置的範圍，然後以此方式將損壞限制在您需要的地方。 – Sajid 2011-04-09 20:31:28

@Sajid我經歷了一個類似晦澀/抽象的問題（至少對我來說），一旦定位被應用，文字就會落在圖標下方。這個空白的建議解決了我的問題。 – 2015-07-25 01:38:15

因爲.field有位置relative，如果你將添加.icon風格：position:absolute;top:0px;的.field的.icon內將在「0像素」被添加在.field的頂部不是body

我無法用英語來解釋它>。 <，我希望你能理解

來源

2011-04-09 18:35:51 John

它不是定位 - 它包含了「圖標」 class..in一個你已經有了一個簡單的inlinea其他嵌套設置的元素如果母公司是塊級別h2這意味着您的「內嵌塊」具有不同的線高度和垂直對齊方式

來源

2011-04-09 18:46:23 clairesuzy

嵌入塊內部位置：絕對元素

回答

相關問題