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

は、今私は、アカウントに兄弟の両方のための30pxのwidhtを取るcalc(100% - 70px);にその幅を設定した場合、私の計算ごとに、要素.inpootは素晴らしく、居心地の良いに収まる必要があり、その後、10pxの独自のマージン。しかし、私の全く驚いたことに、人生は簡単ではない期待どおりに動作しません。最後の兄弟、.yesoが次の行にプッシュされています。

DEMO 1

しかし!!! .inpootの幅をcalc(100% - 82px)に設定すると、それは機能しますが、私は神の美しい地球上でどこから来ているのでしょうか？

DEMO 2

Answer 1

あなたはそのinline間とinline-block要素、スペースの問題を知っている必要があります。したがって、2つのインライン要素の間に空白がある場合は、合計計算で考慮されます。これを避けるためにそこにトリックの多くがありますが、最も簡単なものは以下の通りです：

.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と最良の選択肢は、（私のような）統合stacksippippsです