html - 在另一个没有边距的情况下水平对齐多个div

Question

我在这个小提琴中的另一个里面有 4 个 div 。我无法删除 class div 之间的空格toolbarItem，

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

在这里看他们演示

查看这篇文章了解更多信息——>> http://css-tricks.com/fighting-the-space-between-inline-block-elements/