Question

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

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

Answer 1

我在评论中借助@Lubnah自己找到了解决方案。

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

.tab-list li:first-of-type {
  border-left: none;
  margin-right: 0px;
}

Answer 2

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

width: calc( 25% - 1px );
width: -moz-calc( 25% - 1px );
width: -webkit-calc( 25% - 1px );

Answer 3

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

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

左边距（1）加上宽度（23）加右边距（1）= 25.即，在页面上放置四次将加起来为100。

Answer 4

你可以通过在每个元素中设置一个宽度为auto和margin-right的内部div来轻微欺骗：1px

看到这个小提琴：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;
}

Answer 5

使用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;

}

Answer 6

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

 .box{
      width:25%;
      box-sizing:border-box;
      border-right: 1px solid "same color as your background"
 }

如何以百分比定义元素的宽度

6 个答案: