水平对齐多个div而不是边距

Question

我在 fiddle 中有另外4个div。我无法删除类toolbarItem，

的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;
}

我希望这四个div能够一个接一个地代替：

Answer 1

默认情况下，inline-block会在元素周围添加一些边距。

您可以通过以下代码

替换您的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>

要将所有这些内容添加到一行，您需要将float:left;添加到.toolbarItem

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

<强> See Them Demo Here

查看此文章以获取有关此内容的更多信息 - ＆gt;＆gt; http://css-tricks.com/fighting-the-space-between-inline-block-elements/