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

现在根据我的计算，如果我将元素 .inpoot 的宽度设置为 calc(100% - 70px);，考虑到两个兄弟姐妹的 30px 的宽度，元素 .inpoot 应该很舒服，然后是它自己的边距 10px。但令我非常沮丧的是，~~生活并不容易~~它没有按预期工作。最后一个兄弟 .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 最好的选择是集成的 stacksnippets（比如我的）

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

CSS3 calc() function not working correctly

css

calc