Question

所有的宽度和边距总共达到了99.96％，因此它应该适合100％。我知道边框会增加宽度，所以我已经完成了box-sizing: border-box;，但似乎无法修复它。如果我float: left然后它在Chrome中运行 okay ，但我觉得这是一个糟糕的解决方法，并且实际上并没有解决问题。

为什么这一切都不适合一条线？

Here's my jsfiddle.

HTML

<div id="container">
    <a href="#">
        1
    </a>
    <a href="#">
        2
    </a>
    <a href="#">
        3
    </a>
    <a href="#">
        4
    </a>
</div>

CSS

body {
    border: 1px solid black;
    background-color: #BCCDDC;
    margin: 5% 25%
}

#container a {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid #fff;
    display: inline-block;
    width: 15%;
    margin: 0 6.66%;
    padding: 20px 0;
}

#container a:first-of-type {
    margin-left: 0 !important;;
}

#container a:last-of-type {
    margin-right: 0 !important;
}

Answer 1

inline-block个元素没有浮动;它们是内联的，这意味着元素之间的空白被保留。

您可以通过在<a>代码之间完全删除空格来解决此问题：http://jsfiddle.net/mblase75/y1Ltq1fc/4/

    <a href="#">
        1
    </a><a href="#">
        2
    </a><a href="#">
        3
    </a><a href="#">
        4
    </a>

或者，制作主播float: left并将overflow: auto放在父#container上：http://jsfiddle.net/mblase75/y1Ltq1fc/9/

#container {
    overflow: auto;
}
#container a {
    float: left; /* automatically sets display:block */
    /* etc. */
}

Here are some other techniques，如果您在实施上述内容时遇到问题。

Answer 2

display: inline-block;尊重元素之间的空白，要修复它，你可以：

删除HTML

中元素之间的空格

<div id="container"> 
    <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>

http://jsfiddle.net/1sgjh5c3/

在CSS

中的容器上使字体大小为零

#container {
    font-size: 0;
}
#container a {
    font-size: 12px;
}

http://jsfiddle.net/jLhr8xcn/

Answer 3

正如其他答案中所提到的，元素之间的空白是这里的问题。

虽然你可以在这里使用float: left，但你必须牢记两件事：

当您的容器只有浮动元素时，它不会伸展使用overflow: auto来修复
根据您的屏幕尺寸，丢失的0.04％可能会显示，所以你可能想要改变最后一个元素的对齐

#container {
  overflow: auto;
}
#container a {
  float: left;
}
#container a:last-child {
  float: right;
}

Answer 4

如果您不想处理手动设置边距，可以使用display: flex和justify-content: space-between。

JSFiddle

只需将两种样式添加到父级，然后从子级中删除边距

#container {
    display: flex;
    justify-content: space-between;
}

为什么我的内容对于容器来说太宽了？

4 个答案: