5

不知道我做错了什么，我认为通过添加边框框，它可以整齐地适合这 4 个框。

http://jsfiddle.net/jzhang172/x3ftdx6n/

.ok{
width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
}
<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

4

2 回答 2

11

问题是，inline-block默认情况下，元素渲染时会增加一些额外的空间。

为什么？因为divset toinline-block具有一些内联元素特性。

元素之间的空格或换行符span将导致浏览器呈现空格。

同样，如果您在<p>元素中编写文本，则每次点击空格键或添加换行符时，浏览器都会呈现一个空格。

同样的规则也适用于inline-blockdiv。源中的空格或换行符将导致呈现空格。这会产生意外的宽度，从而导致溢出或换行。

一种解决方案是删除源中元素之间的所有空格：

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}
<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

另一种方法设置font-size: 0在父级上，并在必要时恢复子级上的字体：

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
  font-size: 0;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
  font-size: 16px;
}
<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

其他选项包括负边距、省略结束标签、使用注释标签、浮动和弹性框。有关更多详细信息，请参阅这篇文章：

于 2015-09-26T19:44:25.437 回答
1

我会坚持你只添加一个属性。一种删除boxdiv 之间的空格。只需添加float:left;到您的.box类/ div。

演示：更新

.ok{
    margin:0px auto; /* ADDED */
    width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
    padding:0px auto;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
    float:left;
}
<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

更新：要使其居中，只需向您的类/div添加一个属性。查看更新的演示和片段。margin:0px auto;.ok

注意：这将使您在boxdiv 中的文本左对齐，因此如果您希望它居中，只需在 CSS 中添加text-align:center;到您的类。.box

于 2015-09-26T20:08:24.763 回答