html - 内联跨度输入文本和按钮

Question

我们必须在同一行上显示一个输入字段和一个带有内部跨度的按钮。 按钮对应。其内跨度必须有width:auto ，输入文本必须填充剩余宽度。

fiddle :http://jsfiddle.net/1xfxpm55/

HTML:

<div class="wrapper">
    <input type="text">
    <button> <span>Auswählen</span>

    </button>
</div>

CSS:

.wrapper {
    width:100%;
    display: table;
}
input {
    display: table-cell;
    width: 100%;
    float: left;
}
button {
    display: table-cell;
    width: auto;
}

感谢您的任何提示

Answer 1

将按钮放在宽度较小的 div 中:

* {
    box-sizing:border-box;
}
*:before, 
*:after {
    box-sizing:border-box;
}
.c1 {
    display: table-cell;
    padding-right:10px;
}
input{
    width:100%;
}
.c2 {
    display: table-cell;
    padding-left:10px;
    width:1%
}

<div class="wrapper">
    <div class="c1">
        <input type="text">
    </div>
    <div class="c2">
        <button><span>Auswählen</span></button>
    </div>
</div>