Question

我想解决我的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

Answer 1

通过边框宽度（乘以2）减小每个div的宽度，或者使用模糊为1px的box-shadow属性应用假边框。

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

Answer 2

原因是10％加上甚至1px边框大于10％因此，太大而不适合10。一个简单的解决方案是在div内部创建一个边框，并使其填充整个父级。但请发布一些代码，以便我们提供更好的解决方案。

Answer 3

将其添加到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;
}

或者您可以将width设置为calc(10% - 2px)。

Answer 4

.linkss {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* plus all your other properties here*/
}

Answer 5

一种解决方案是在链接上设置1个像素的负边距，请参阅下面的示例

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

我之前已经这样做了，但有时候依赖于你的布局或设计，这可能需要稍加调整，如果这有帮助，请告诉我。周五愉快！

Answer 6

对此类布局问题的一个修复是将边框应用于div中的元素（在您的情况下为<a>元素）。

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

在FireFox中测试。

另一种解决方案是减少10％的宽度并将边框应用为百分比宽度;但试图让它在顶部和顶部相同然后，底部将成为一个令人头痛的问题。

CSS Divs不适合没有边框

6 个答案: