Question

我正在尝试设置我的表单，使其左侧有一个输入字段，右侧有一个提交按钮。但是，我需要输入字段来占用所有剩余空间减去1rem的空格。

我尝试过这段代码：

<aside class="widget-area">
    <section class="widget-search">
        <form class="search-form">
            <label class="search-label">
                <span class="search-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search..." />
            </label>
            <input type="submit" class="search-submit" />
        </form>
    </section>
</aside>

.search-form {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.search-label {
    display: table-cell;
}

.search-input {
    display: table-cell;
}

但是，所有这一切都是在输入字段内移动按钮......

我也试过这条路：

.search-form {
    display: table;
}

.search-label {
    display: table-cell;
    padding: 0 1rem 0 0;
}

.search-input {
    display: table-cell;
}

现在按钮位于输入字段旁边，但它已经离开容器...

Answer 1

您可以在容器上使用 Flexbox ，这样您的输入就可以占用任何剩余空间。

Codepen ，其中2个示例的按钮宽度不同，输入仍然可以自动适应每种情况。

相关的CSS是：

.form-line {
  display: flex;
}
.search-input {
  flex: 1 0 auto;
}

其中flex的3个组件意味着：“可以增长，不能缩小，flex-basis设置为自动”（这里与起始宽度有些相关）

兼容性：IE9 +
备忘单：CSS-tricks

注意：我在标签/输入上添加了for/id，以便所有屏幕阅读器都可以关联它们并将标签读出给用户

Answer 2

为什么不这样做？

.search-form {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.search-label {
   float: left;
  width:200px;
  background: lightblue;
}

.search-submit {
    width: calc(100% - 200px);
  box-sizing: border-box;
}

<aside class="widget-area">
    <section class="widget-search">
        <form class="search-form">
            <label class="search-label">Hello</label>
            <input class="search-submit" />
        </form>
    </section>
</aside>

提交按钮旁边的输入字段（未知宽度+空格）

2 个答案: