下不顯示彼此

和

.ib-half { 
    display: inline-block; 
    width: 50%; 
}

我期望兩個跨度顯示並排側但是他們不會。沒有保證金，填充或邊框，那麼問題是什麼？

來源

2012-12-12 c..

實際的問題是兩個元素之間的空格（換行符）。因爲它是一個內嵌塊元素，所以它會記錄空間，所以它是空間的50％。

一些可能性：

<span class='left'>Left</span><!-- 
--><span class='right'>Right</span>

或<span class='left'>Left</span><span class='right'>Right</span>

或

<span class='left'>Left</span><span 
class='right'>Right</span>

或者對我來說，真的可能是很有道理的，以float: left;並將其更改爲一個display: block元素。我相信內聯元素的本質是以與具有一些額外空間信息的文本相同的方式進行操作，所以爲什麼在沒有理由的情況下變得黑客？

來源

2012-12-12 02:25:44

希望這將有助於

<div>  
     <span class="ib-half"></span> 
     <span class="ib-half"></span> 
    </div> 

 
     div{ 
      width:50%; 
      display:block; 
     } 
     .ib-half { 
      margin:0; 
      display:inline-block; 
      width: 49%; 
      height:100px; 
      }

這裏我使用的是父DIV和設置它的寬度和顯示特性來阻止。在子塊中，你可以將顯示屬性設置爲內嵌塊，如果你想要添加更多的跨度，你可以通過減小跨度塊的寬度100 /（塊的數量）-1來添加。你也可以使用float屬性來獲得結果。

來源

2012-12-12 02:47:33

因爲它是一半，將其設置爲49％根本沒有意義！ –

你是我寫的..我從來不知道字體大小會有所作爲..謝謝.. – 2012-12-12 02:59:18

你可以投我的答案;） –

將父元素的字體大小設置爲零可能是一個修復。

HTML：

<div class = "parent"> 
    <span class="ib-half">Left</span> 
    <span class="ib-half">Right</span> 
</div>

CSS：

span{ 
    background:#bdbdbd; 
} 

.ib-half { 
    display: inline-block; 
    width: 50%; 
    font-size:10px; 
} 

.parent { 
    font-size: 0; 
}

檢查這個小提琴。 http://jsfiddle.net/YpTMh/9/

來源

2012-12-12 02:50:28

這應該是被接受的答案。由於內聯塊是內聯流的一部分，因此受到空間的影響。設置字體大小：0有效地使空間寬度爲0。 – hesselbom

在CSS3不錯的答案是：

white-space: nowrap;

在父節點

，並：

white-space: normal; 
vertical-align: top;

在DIV（或其他）在50 ％

例：http://jsfiddle.net/YpTMh/19/

來源

2015-02-03 19:14:04 Matrix

下不顯示彼此

回答

相關問題