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