[分享]css两个边框同一行显示不出来

在网页设计中，掌握CSS边框的使用是非常重要的。然而，有时候我们会遇到一个问题：为什么两个边框设定为同一行却只有一个显示出来了呢？CSS的边框属性可以像这样进行设置：border: 1px solid...

在网页设计中，掌握CSS边框的使用是非常重要的。然而，有时候我们会遇到一个问题：为什么两个边框设定为同一行却只有一个显示出来了呢？
CSS的边框属性可以像这样进行设置：

border: 1px solid black; 

如果我们想让两个边框放在同一行上，可能会这样写CSS代码：

.left, .right {
  display: inline-block;
  border: 1px solid black;
} 

HTML代码如下：

<p><span class="left"></span><span class="right"></span></p> 

然而，当我们运行代码后，我们会惊奇地发现，只有一个边框被成功显示了出来。这是怎么回事呢？
原因是因为两个边框的宽度之和大于了p标签的宽度，超出了p标签的范围。要修复这个问题，我们可以使用下面的代码：

.left, .right {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid black;
  width: 50%;
} 

通过设置box-sizing属性为border-box，并将边框宽度设为50%，就成功地将两个边框放在同一行上了。
总结一下，如果我们想要在同一行上显示两个边框，需要确保两个边框的宽度之和不大于所在元素的宽度，并将box-sizing属性设为border-box。