CSS3 calc() 函数无法正常工作

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;
}

现在根据我的计算，如果我将元素 calc(100% - 70px); 的宽度设置为 calc(100% - 70px); 并考虑到兄弟姐妹的 30px 的宽度以及其自身的 @ 987654329@。但令我彻底失望的是，生活并不容易它没有按预期工作。最后一个兄弟.yeso 被推到下一行。

DEMO 1

但是！！！如果我将.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，最好的选择是集成的 stacksn-ps（和我的一样）