跨度內聯塊
[英]inline-block on span
問題描述
我希望以下示例中的兩個span標記並排顯示，而不是顯示在另一個下方。 如果我將類span .right 的width設置為 49%，它們會彼此相鄰顯示。 我無法弄清楚為什么正確的跨度被向下推，就像正確的跨度有一些不可見的padding/margin ，這使得它需要超過 50%。 我試圖在不使用 html 表格的情況下完成這項工作。 有任何想法嗎？
* { margin: 0; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; border: none; } div.header { width: 100%; height: 80px; vertical-align: top; } span.left { height: 80px; width: 50%; display: inline-block; background-color: pink; } span.right { vertical-align: top; display: inline-block; text-align: right; height: 80px; width: 50%; background-color: red; }
<html> <head> <title>Test Page</title> </head> <body> <div class='header'> <span class='left'>Left Span 50% width</span> <span class='right'>Right Span 50% width</span> </div> </body> </html>
感謝您的解釋。 float:left在 FF 3.1 中與預期結果完美結合。 不幸的是，在 IE6 中，右側跨度呈現 50% 的 50%，實際上使其寬度為瀏覽器窗口的 25%。 將其寬度設置為 100% 可以達到預期的結果，但在標准合規模式下的 FF 3.1 中會中斷，我理解這一點。 讓它在 FF 和 IE 6 中工作，而不訴諸黑客或使用多個 CSS 表一直是一個挑戰
3 個解決方案
解決方案1
3 已采納 2008-08-29 16:14:25
float: left;
嘗試將其添加到 span.left
它會導致它向左浮動（如語法所建議的那樣）。
我無論如何都不是 CSS 專家，所以請不要將此視為無可爭辯的事實，但我發現當某些東西浮動時，它下面的東西的垂直位置沒有區別。
如果您將 span.right 向右浮動，然后在它們下方添加文本，您應該會得到一些有趣的結果，要停止這些“有趣的結果”，您可以使用“clear: left/right/both”，這將導致塊具有清晰的樣式在任何浮動到左側/右側/兩者的下方。 W3Schools也有關於此屬性的頁面。
歡迎來到 Stackoverflow。
解決方案2
2 2013-04-24 11:45:47
這是因為 inline 和 inline-block 在元素之間包含空格（在您的情況下是換行符）。 在您的情況下，元素的組合寬度為 50%+50%+whitespace > 100%。
您應該將兩個元素放在 HTML 文檔中的同一行（沒有空格）
<div class='header'>
<span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>
或者使用 HTML 注釋
<div class='header'>
<span class='left'>Left Span 50% width</span><!--
--><span class='right'>Right Span 50% width</span>
</div>
我自己更喜歡后者。
解決方案3
1 2008-08-29 17:50:18
我不喜歡這個 hack，但它似乎在 Firefox 和 IE6 中都可以完成這項工作：
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
*width:100%;
background-color:red;
}
注意*width: 100%這似乎滿足 IE6 的要求，但被 Firefox 忽略。
為什么具有內聯塊跨度的此div行為與正常不同
[英]Why is this div with an inline-block span behaving differently than normal
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.