带跨度内联的输入文本和按钮[关闭]

Question

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

小提琴：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>

Answer 2

你可以使用javascript吗？如果我的问题是正确的，输入文本字段必须填满整行 - 输入按钮的宽度，对吗？这是一个建议：

function getRemainingWidth(button, elm) {
    elm.style.width = "calc( 100vw - " + realWidth(button) + "px)";
    alert(elm.style.width);
}

function realWidth(elm) {
    var width = elm.offsetWidth + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-left'), 10) +
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('padding-right'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-left'), 10) + 
        parseInt(window.getComputedStyle(elm, null).getPropertyValue('margin-right'), 10);

    return width + 10;
}

window.onload = getRemainingWidth(document.getElementById('btn'), document.getElementById('textfield'));

在这里 http://jsfiddle.net/1xfxpm55/4/ 做了一个工作 jsfiddle（它是您提供的演示的更新）。