Question

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

出于某种原因，它们并不是彼此相邻的。即使我删除边框，它们仍然不会彼此相邻。

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

Answer 2

默认情况下，

宽度不考虑边框或填充。如果希望宽度包含这些属性，请设置box-sizing：border-box

Answer 3

尝试margin-auto，float和49％width

Answer 4

默认情况下，

width不会考虑border或padding。如果您希望宽度包含这些属性，请设置box-sizing: border-box。

Here's some documentation on the box-sizing property。将绝对值（例如box-sizing: border-box）与相对值（例如px）混合时，%特别有用。

Answer 5

如果我正确理解了您的问题，那么最好使用标签名称为唯一ID，以便您可以应用float: left一个标签，然后float: right另一个标签。

Answer 6

尝试这可能会有所帮助

.box1 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.box2 {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

HTML

<div class="container">
    <div class="box1">First Box</div><div class="box2">Second Box</div> 
</div>

50％宽度不起作用

6 个答案: