6

我有四个元素，每个元素的宽度都设置为25%. 它们完美地填满了页面的宽度。

我想1px在每一个之间留一个空隙。如果我这样做（margin-right: 1px;例如），最后一个元素会溢出到下一行。如何在1px不首先计算像素宽度的情况下减少每个元素的宽度？

4

6 回答 6

3

在评论中@Lubnah 的帮助下，我自己刚刚找到了一个解决方案。

.tab-list li {
  margin-right: -1px;
  border-left: 1px solid #fff;
}

.tab-list li:first-of-type {
  border-left: none;
  margin-right: 0px;
}
于 2012-11-01T17:11:50.043 回答
2

您可以使用 CSS calc，但它的浏览器支持很粗略：

width: calc( 25% - 1px );
width: -moz-calc( 25% - 1px );
width: -webkit-calc( 25% - 1px );
于 2012-11-01T17:11:46.207 回答
0

宽度是在容器内计算的。您设置的任何填充或边距都将添加到宽度中。

将宽度设置为 23%，将边距设置为 1%

左边距 (1) 加上宽度 (23) 加上右边距 (1) = 25。也就是说，在页面上放置四次将加起来 100。

于 2012-11-01T17:10:52.217 回答
0

您可以通过在每个元素内使用宽度为 auto 和 margin-right:1px 的内部 div 来稍微作弊

看到这个小提琴：http: //jsfiddle.net/7R6zZ/

<div class="outer">
 <div class="inner">1</div>
</div>
<div class="outer">
 <div class="inner">2</div>
</div>
<div class="outer">
 <div class="inner">3</div>
</div>
<div class="outer">
 <div class="inner">4</div>
</div>

.outer {
 width:25%;
 float:left;
}
.outer .inner {
 width:auto;
 margin-right:1px;
 background:#999;
 min-height:300px;
}
于 2012-11-01T17:14:06.623 回答
0

使用box-sizing: border-box;和边界。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div {
  width: 25%;
  border-right: 1px solid right;

}

于 2012-11-01T17:18:08.933 回答
0

使用框大小作为box-sizing:border-box 并使用与背景颜色相同的 1px 右边框

 .box{
      width:25%;
      box-sizing:border-box;
      border-right: 1px solid "same color as your background"
 }
于 2012-11-01T17:27:07.087 回答