html - 内联 block div 丢失右边框-6ren

转载作者：太空宇宙更新时间：2023-11-03 21:19:47

24

4

使用这段代码，我可以根据需要并排获得两个 div。除了，第二个 div 的右边框丢失。这似乎是一个大小问题，好像 div 超出了范围...我该如何解决这个问题？

我尝试添加边距，但没有任何效果...

.wrapper {
   width: 100%; 
   white-space: nowrap;
   overflow: hidden;
}
    
.left { 
    width: 50%; 
    height:10px;
    border: 1px solid; 
    display: inline-block;     
}

.right {
    width: 50%; 
    height:10px; 
    border:1px solid; 
    display: inline-block;
    margin-left: -1px;
}

<body style="margin-right: 50px">
  <div class="wrapper">
    <div class="left"></div><div class="right"></div>
  </div>
</body>

最佳答案

我认为您正在寻找 box-sizing:border-box;

.wrapper {
       width: 100%; 
       white-space: nowrap;
       overflow: hidden;
    }
    
    .left { 
        width: 50%; 
        height:10px;
        border: 1px solid; 
        display: inline-block;
        box-sizing:border-box;
        border-right-width :0
    }
    .right {
        width: 50%; 
        height:10px; 
        border:1px solid; 
        display: inline-block;
         box-sizing:border-box;
    }

<div class="wrapper">
        <div class="left"></div><div class="right"></div>
      </div>

box-sizing reference

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

宽度和高度属性包括内容、填充和边框，但不包括边距。

关于html - 内联 block div 丢失右边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38528779/

24

4

0

首页

博学

6Ren·AI

商城

html - 内联 block div 丢失右边框