CSS3 Funktion calc() funktioniert nicht richtig

Question

Ich verwende calc(), um die verfügbare Breite der Eingabe zu messen, nachdem die Breite der gleichgeordneten Elemente subtrahiert wurde.

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

Und ich habe folgende 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; 
} 

Jetzt nach meinen Berechnungen das Element .inpoot sollte schön und gemütlich passen, wenn ich seine Breite zu calc(100% - 70px); unter Berücksichtigung der widht von 30px für die Geschwister beide gesetzt und seine eigene Marge von 10px dann. Aber zu meiner größten Bestürzung, Leben ist nicht einfach es funktioniert nicht wie erwartet. Das letzte Geschwister .yeso wird in die nächste Zeile geschoben.

DEMO 1

ABER !!! wenn ich die .inpoot Breite auf calc(100% - 82px) voila setze !! es funktioniert, aber ich bin verblüfft, wo auf der schönen Erde GOTTES diese zusätzliche Breite herkommt?

DEMO 2

Answer 1

Sie müssen, dass zwischen inline und inline-block Elemente kennen, die Räume Angelegenheiten. Wenn Sie also ein Leerzeichen zwischen zwei Inline-Elementen haben, wird dies in der Gesamtberechnung berücksichtigt. Um dies zu vermeiden gibt es eine Menge Tricks, aber die einfachste ist die folgende:

.containero { 
     font-size: 0; 
} 

Fügen Sie diese Eigenschaft in Ihrem CSS und es funktioniert. Arbeitsbeispiel:

.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>

Und bitte nicht verwenden codepen.io da wir ein Konto müssen den Code modifizieren und teilen. Es ist besser jsfiddle.net und die beste Wahl ist die integrierte Stacksnippets (wie meine)