html - 50% 宽度不起作用

Question

我正在尝试创建两个 div，它们的宽度大小为父级的 50%，并且彼此相邻。但是，它们需要有 2px 的边框。我试图让它保持响应，并保持百分比宽度。

出于某种原因，它们并没有彼此对齐。即使我移除边框，它们仍然不会彼此相邻。

http://jsfiddle.net/tmyie/HrXxr/

HTML:

<div class="container">
    <div class="tab">First Box</div><div class="tab">Second Box</div> 
</div>

CSS:

    .container {
        max-width: 500px;
        overflow: auto;
        height: 300px;
        background-color: orange;
    }
.tab {
    display: inline-box;
    width: 50%;
    backround-color: orange;
    text-align: center;
    width: 50%;
    box-shadow: 0px 0px 0px 2px red inset;
    display: inline-block;
    padding: 5px;
    letter-spacing: 1px;
}

Answer 1

你的问题是填充，试试:

padding: 5px 0;

这是 Fiddle