Question

我有以下小提琴：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;
}

它不会出去。

为什么这个文本输入在div之外流血，我该如何纠正呢？

1 个答案: