Html CSS Divs赢得'；没有边界是不合适的

我想解决我的HTML/CSS中的一个错误。 我有多个链接设置为div。它们的宽度是10%。因此，所有10个div都适合父div。我希望链接（10个div）有一个边框来区分它们。如果我尝试添加边框，最后一个div会跳出父div。有没有办法解决这个问题？我试过使用overflow:auto，但不起作用。我最想找到的是一种在div内部制作边框的方法，如果可能的话

body {
    background-color: #574B59;
}
.header {
    height: 87px;
    width: auto;
    border: 4px solid black;
    margin: 20px;
    background-color: white;
    text-align:center;
    font-size: 20px;
}
.links {
    height: 25px;
    width: auto;
    border: 3px solid black;
    margin: auto;
}
.body{
}
.subheader{
}
.linkss {
    width: 10%;
    height: 25px;
    float: left;
    text-align:center;
    background-color:#06C;
    border: 1px solid black;
}

---

看看.Linkss

原因是10%加上甚至1px的边框都大于10%，因此太大，无法容纳10个。一个简单的解决方案是在div内的某个对象上创建一个边框，并使其填充整个父对象。但是，请发布一些代码，以便我们提供更好的解决方案。

或者将每个div的宽度减少为边框宽度（乘以2），或者使用框阴影属性（模糊度为1px）应用假边框

box-shadow: 0px 0px 1px #000000;

---

将以下内容添加到div的CSS中：

.linkss {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 10%;
  height: 25px;
  float: left;
  text-align:center;
  background-color:#06C;
  border: 1px solid black;
}

---

或者您可以将

宽度设置为
计算（10%-2px）
一种解决方案是在链接上设置1个像素的负边距，请参见下面的示例

.linkss {
    margin: 0 -1px 0 -1px;
    width: 10%;
    height: 25px;
    float: left;
    text-align:center;
    background-color:#06C;
    border: 1px solid black;
 }

我以前做过，但有时根据你的布局或设计，这可能需要一些调整，让我知道这是否有帮助。星期五快乐
 解决此类布局问题的一个方法是将边框应用于div中的元素，在您的示例中是
元素

.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}

在FireFox中测试

另一个解决方案是减少10%的宽度，并以百分比宽度应用边界；但是，尝试在顶部和底部使用相同的大小将成为一个令人头痛的问题。
带边框元素上的框大小属性我看到很多人建议使用框大小属性，但它与旧浏览器（IE7和旧浏览器）不太兼容。如果您不需要IE7支持，那么这是一个很好的解决方案！由于您使用的是百分比宽度，所以框阴影属性可能是更好的选择您将如何实现这一点？编辑：工作得很好！谢谢没问题！即使它不是一个“真实”边框，这个“伪边框”看起来也一样好，不会破坏流畅的布局
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}