我试图并排放置两个 DIV，50% 都带有边框。我创建了一个 Div Container 并在其中创建了两个，在我放置 border 属性之前它一直有效。
当 Border 存在时，DIV 呈现为两行:
body {
background-color:cadetblue;
}
#container {
width: 800px;
}
#divL, #divR {
width: 50%;
display: inline-block;
border: 2px solid black;
}<body>
<div id="container">
<div id="divL">L</div><div id="divR">R</div>
</div>
</body>但是当我删除边框规则时，它会按预期工作。
body {
background-color:cadetblue;
}
#container {
width: 800px;
}
#divL, #divR {
width: 50%;
display: inline-block;
}<body>
<div id="container">
<div id="divL">L</div><div id="divR">R</div>
</div>如何给 divL 和 divR 添加边框？
最佳答案
添加box-sizing: border-box 所以边框宽度将包含在 div 的 50% 宽度中。
body {
background-color:cadetblue;
}
#container {
width: 800px;
}
#divL, #divR {
width: 50%;
display: inline-block;
border: 2px solid black;
box-sizing: border-box;
}<div id="container">
<div id="divL">L</div><div id="divR">R</div>
</div>关于html - CSS border 属性打破内联 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35651114/