水平對齊多個div在另一個無邊距

我有4個div在這fiddle在另一個裏面。我不能設法去除toolbarItem類的div之間的空間，水平對齊多個div在另一個無邊距

HTML

<div id="topPanelContainer"> 
    <div id="toolbar"> 
     <div id="toolbarItem1" class="toolbarItem"></div> 
     <div id="toolbarItem2" class="toolbarItem"></div> 
     <div id="toolbarItem3" class="toolbarItem"></div> 
     <div id="toolbarItem4" class="toolbarItem"></div> 
    </div> 
    </div>

CSS

#topPanelContainer { 
    height: 30px; 
    background: lightgrey; 
    text-align: center; 
} 
#toolbar{ 
    height:30px; 
    width:800px; 
    background:grey; 
    margin: 0 auto; 
} 

.toolbarItem { 
    height: 30px; width: 100px; 
    background: blue; 
    display: inline-block; 
    position:relative; 
    margin: 0; 
}

我希望四個格留一個剛過另一個在的地方：

enter image description here

來源

2013-10-14 Michele

hi你說例如它應該看起來像在div而不是三個div ...即使在代碼 – codebreaker

@codebreaker三個div嗨我所說的是：我不明白爲什麼在** [這裏]（http://jsfiddle.net/metacode/RBqYR/）**兩個子div之間沒有空間，不同於我的 – Michele

我希望@vikas Ghodke已經解決了你的問題查看他的答案... – codebreaker

默認情況下，內聯塊會在元素周圍添加一些邊距。

您可以通過下面的代碼

<div id="topPanelContainer"> 
    <div id="toolbar"> 
     <div id="toolbarItem1" class="toolbarItem"></div><div id="toolbarItem2" class="toolbarItem"></div><div id="toolbarItem3" class="toolbarItem"></div> 
     <div id="toolbarItem4" class="toolbarItem"></div> 
    </div> 
</div>

而且讓所有的人都在一個行，你需要添加float:left;到.toolbarItem

.toolbarItem { 
    height: 30px; 
    width: 100px; 
    background: blue; 
    display: inline-block; 
    position:relative; 
    margin: 0 auto; 
    padding: 0px; 
    border: 0px; 
    float:left; 
}

更換你的HTML中刪除這個多餘的差距See Them Demo Here

查看本文獲得關於此問題的更多信息 - > >http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2013-10-14 11:11:14

如何解決此問題的一個很好的參考：http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – CodingIntrigue

@Rraham感謝您的文章，包括我的答案中的鏈接。 –

omg，你是說只是把所有的div放在同一行中將會重現那個空間？ uaau。對不起，有一個問題，（因爲我是web開發的新手），有什麼理由爲什麼會發生這種情況？其實是要表現得如此呢？順便說一句，非常感謝。 – Michele

水平對齊多個div在另一個無邊距

回答

相關問題