Question

我在减去兄弟元素的宽度后使用calc()来测量输入的可用宽度。

<div class="containero">
  <button class="noey">No</button>
  <input  class="inpoot" />
  <button class="yeso">Yes</button>
</div>

我有以下CSS。

.containero {
    width: 100%;
    background-color: yellow;
    display: inline-block;
    box-sizing:border-box;
}

.noey, .yeso {
  border: 1px solid red;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle; 
  display:inline-block;
  color: red;
  padding:0px;
  box-sizing:border-box;

}


.inpoot {
  height: 31px;
  margin: 0 5px;
  display:inline-block;
  width: calc(100% - 70px);
  box-sizing:border-box;
}

现在根据我的计算，如果我将宽度设置为.inpoot，并考虑到两个兄弟姐妹的calc(100% - 70px);的宽度，那么元素30px应该非常舒适。那么它自己的余量为10px。但令我极为沮丧的是，生活并不容易它没有按预期工作。最后一个兄弟.yeso正被推到下一行。

DEMO 1

BUT !!!如果我将.inpoot宽度设置为calc(100% - 82px)瞧！它有效，但我在上帝的美丽地球上大放异彩，是否有额外的宽度？

DEMO 2

Answer 1

您需要知道在inline和inline-block元素之间，空格很重要。因此，如果两个内联元素之间有空格，则会在总计算中考虑。为了避免这种情况，有很多技巧，但最简单的是：

 .containero {
       font-size: 0;
 }

在CSS中添加此属性，它可以正常工作。工作示例：

.containero {
    font-size: 0;
    width: 100%;
    background-color: yellow;
    display: inline-block;
    box-sizing:border-box;
}

.noey, .yeso {
  border: 1px solid red;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle; 
  display:inline-block;
  color: red;
  padding:0px;
  box-sizing:border-box;

}


.inpoot {
  height: 31px;
  margin: 0 5px;
  display:inline-block;
  width: calc(100% - 70px);
  box-sizing:border-box;
}

<div class="containero">
  <button class="noey">No</button>
  <input  class="inpoot" />
  <button class="yeso">Yes</button>
</div>

请不要使用codepen.io，因为我们需要一个帐户来修改代码并分享它。这是更好的jsfiddle.net，最好的选择是集成stacksnippets（像我的）

CSS3 calc（）函数无法正常工作

1 个答案: