並排隔間沒有差距？

我指的是我在SO上發現的小提琴，它使用了display: inline-block;，我已將它應用於自己的工作，但我無法弄清楚如何讓兩個div並排坐在一起，而不是3-4px間隙？並排隔間沒有差距？

我已經試過：

HTML

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div>

CSS

div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 

.container div { 
    display: inline-block; 
}

，但一無所獲。

來源

2013-10-01 SaturnsEye

'顯示：直列block'添加所施加的元件之間的一些間隙。爲了消除這種差距，不要在HTML代碼中的元素之間留出空間，如下所示：'

'或者使用'float：left'而不是'display：inline-block'。如果你仍然想用'display：inline-block'去，那麼就有一個修正，它以'em'爲單位在負值中應用margin。我認爲這是'-0.36em'。 –

我會用float:left也嘗試div.left和div.right設置邊距設置爲0，如：

margin:0 auto;

所以，用你的小提琴：

div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
    margin:0 auto; 
    float:left; 
}

來源

2013-10-01 11:48:19

如果設置了display：inline-block;然後添加margin-right: -4px;以消除差距。

see this demo

來源

2013-10-01 11:42:04

輝煌，這工作，但它是最好的方式做到這一點雖然？ – SaturnsEye

或者你可以使用float：left; –

您可以刪除HTML中元素之間的新行 – avrahamcool

其實你沒有改變CSS一切努力避免的差距，

這是在HTML中的空白問題，

更改HTML這個

<div class="container"> 
     <div class="left">LEFT 
     </div><div class="right">RIGHT 
     </div> 
</div>

jsFiddle here

您可以編輯你的CSS

可以使用float:left;而不是display:inline-block;以消除空白問題。

來源

2013-10-01 11:47:23

使用2跨度（現在的div），製作內聯塊，不要在它們之間留下任何空格或新行。使用跨度不是div，因爲有些老式不能從div等默認塊元素創建內嵌塊元素。

像這樣：

<span style="display: inline-block">one</span><span style="display: inline-block">two</span>

不喜歡這樣：

<span style="display: inline-block">one</span> <span style="display: inline-block">two</span>

來源

2013-10-01 11:54:42 Aleksandrenko

而是使用display:inline-block可以float的div's，只是改變css到

.container div { 
float:left; 
}

上面的代碼應該會得到所需的結果。它將對齊div彼此相鄰，沒有任何空間。

參見下面的鏈接可看到什麼引起的空白區或約float和display:inline block

Reference 1

Reference 2

來源

2013-10-01 11:58:39 Pbk1303

並排隔間沒有差距？

回答

相關問題