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

Question

所有宽度和边距的总和为 99.96%，因此它应该正好适合 100%。我知道边框会增加宽度，所以我已经完成了 box-sizing: border-box; 但这似乎并没有解决它。如果我 float: left 然后它在 Chrome 中工作没问题，但我觉得无论如何这是一个蹩脚的解决方法，并没有真正解决问题。

为什么不能全部放在一条线上？

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元素不 float ；它们是内联的，这意味着保留元素之间的空白。

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

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

---

或者，制作 anchor float: left然后放overflow: auto在 parent 身上#container : http://jsfiddle.net/mblase75/y1Ltq1fc/9/

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

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