html - 为什么此文本输入会溢出到 div 之外，我该如何更正它？

Question

我有以下 fiddle :http://jsfiddle.net/stpra123/7cap7o7s/7/

#my_input 流出单元格。我需要 #my_input 来填满整个宽度——不多也不少。 (将 #my_input 的宽度设置为小于 100% 的值可以解决此问题，但在某些屏幕尺寸上，但根据屏幕尺寸，它不能保证它始终对齐良好)。还有其他方法可以使 #my_input 更适合吗？

HTML

<div class="site-body">
    <div class="site-center">
        <div class="cell">
            <div class="col width-fill">
                <div class="container">
                    <form>
                        <input id="my_input" value="I am a bit messed up!" />
                        <i class="fa fa-calendar"></i>
                    </form>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="col width-fill text">
                This is some text that goes directly below #my_input and the widths need to match otherwise
                everything kind of looks funny. 
            </div>
        </div>
    </div>
</div>

CSS

.cell{
    border: 1px solid red;
    height: 50px;
}
.container{
    position: relative;
    width: 100%;
}
#my_input{
    margin-top: 10px;
    width: 100%;
}
.fa-calendar{
    position: absolute;
    right: 4px;
    top: 18px;
}

Answer 1

只需在输入上添加 box-sizing:border-box:

#my_input{
    margin-top: 10px;
    width: 100%;
    box-sizing:border-box;
}

它不会出去。