設置內聯元素

您可以設置內聯元素一樣<span>，<em>和<strong>的寬度，但要等到放置它們，你不會注意到任何效果的寬度。設置內聯元素

a）我認爲內聯元素的寬度不能設置？

b）假設寬度可以設置 - 我們不會注意到任何效果（因此我們指定的寬度），直到我們定位內聯元素。定位如何/在哪裏？

c）爲什麼只有當我們「定位」它們時，內聯元素的寬度纔是明顯的？

2009-09-14 SourceC

相關/可能重複：http://stackoverflow.com/questions/1085980/inline-elements-with-width?rq=1（但這是更好的問題）。 –

正如其他人所說的，設置內聯元素的寬度（或其他與位置相關的屬性）將導致瀏覽器將該元素顯示爲塊元素。

您可以通過使用CSS display屬性顯式聲明這種行爲。最常見的設置是display: inline（默認），display: block和display: none。
display屬性的完整參考可用here。

然而，應該注意的是，HTML 4.01 specification鼓勵使用的「重寫HTML元素的常規解釋」：

樣式表提供手段指定任意元素的呈現，包括是否一個元素呈現爲塊或內聯。在某些情況下，如列表元素的內嵌樣式，這可能是合適的，但總體來講，作者從重寫HTML元素的傳統解釋在這樣氣餒。

2009-09-14 19:07:24 Donut

「*設置內聯元素的寬度[..]將導致瀏覽器將該元素顯示爲塊*」。你確定？ – Oriol

+14

「設置寬度...將導致瀏覽器將該元素顯示爲塊元素」 - 這是無稽之談。您可以設置寬度，但不適用於元素。 – Quentin

a）一種內嵌元件的寬度被忽略

B，C）當「位置」的內聯元件（I假設這意味着使用位置：絕對），實際上是使其成爲一個塊元素，它的寬度是由瀏覽器解釋

2009-09-14 18:59:35

太好了。當我們無法控制Umbraco Contour生成的表單時，瞭解這一點非常重要。謝了哥們！ –

我認爲這是因爲，當你指定一個「內聯」元素位置屬性的事實，該元素將不再顯示直列，而是被視爲塊級元素。

2009-09-14 19:00:35 tj111

這基本上意味着如果將position: absolute應用於內聯元素，它將變成塊元素和增益寬度。

2009-09-14 19:00:50 n1313

還有顯示的選項：內嵌塊，這可能會給你兩全其美。不過，請注意跨瀏覽器的兼容性。

2009-09-14 19:25:03 charliepark

會檢查出來。 thanx – SourceC

非常好！這是一個很好的[兼容性矩陣]（http://www.quirksmode.org/css/display.html）。今天，'display：inline-block'幾乎可以安全使用 –

雖然有效，但在將元素動態插入到它時仍然有一些非常令人反感/意外的行爲。不知道爲什麼。 – bobobobo

a。內聯元素的寬度被忽略。

b。實際上，如果設置爲display: inline-block;，則可以將寬度應用於元素，但要查看結果，您還應該應用overflow: hidden;。

對有行內和塊類型，您可以使用後續片段的所有優點：

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

在這種情況下，您可以管理寬度和有文字省略號功能。

2017-02-06 15:05:11

內聯元素不能有寬度。寬度是塊元素的屬性。因此，要使用寬度超過內聯元素或具有顯示類型內聯集的元素的屬性，將display顯示爲內聯塊，例如：display：inline-block;

2017-06-28 02:07:09

回答