Question

我们必须在同一行显示输入字段和内部跨度的按钮。按钮分配其内部跨度必须为width:auto，输入文本必须填充剩余的宽度。

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中：

＆＃13;

* {
    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%
}

＆＃13;

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

＆＃13;

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'));

在这里制作一个有效的jsfiddle http://jsfiddle.net/1xfxpm55/4/（它是你提供的演示的更新）。

输入文字＆amp;跨度内联按钮

2 个答案: