html - 输入字段和提交按钮不适合包含元素

Question

我正在尝试使我的搜索栏具有流畅的输入字段宽度，同时旁边还有一个“搜索”按钮。

似乎输入字段.search比名为.navigation-right的包含元素大得多，它会导致按钮.search-submit被推出包含 div。请参阅下面的图片。

问题：

我想让它看起来像什么：

这是我的代码：（为方便起见，我省略了边距和填充值）

CSS

.navigation-right {
    width: 282px; min-width: 282px;
    height: 50px;

    display: table-cell;
    vertical-align: top;

    border: 1px solid #920000;
}

.search {
    width: 100%;
    height: 30px;

    display: table;
}

.search-input {
    height: 28px;
    width: 100%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
}

.search-submit {
    width: 30px;
    height: 30px;

    display: table-cell;
    vertical-align: top;

    margin: 0;
    padding: 0;

    border: 0;
}

HTML

<div class="navigation-right">

    <form class="search">

        <input class="search-input">

        <button class="search-submit"></button>

    </form>

</div>

Answer 1

替换下面的类

.search-input {
    height: 28px;
    width: 70%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
}

Answer 2

是否有使用display: table;and的特定需求display: table-cell;？它让我想起了唯一的编码方式是使用表格的日子......

如果我可以建议另一种方法来做同样的事情并且可以说做得更好:) -input元素将占据其父元素的 100%，按钮具有固定宽度（适用于流体或响应式布局）。

Answer 3

您已将搜索字段 (.search-input) 设置为 100% 宽度，以便填充其父项。您需要将宽度减小到 250px 左右

Answer 4

.search-input {
    height: 28px;
    width: 70%;

    display: table-cell;

    border: 1px solid #920000;
    outline: 0px;
    float:left;
}

.search-submit {
    width: 30px;
    height: 30px;

    display: table-cell;
    vertical-align: top;

    margin: 0;
    padding: 0;

    border: 0;
    float:left;
}

Answer 5

.search-input {
    height: 28px;
    width: 100%;
      display: table-cell;
    border: 1px solid #920000;
    outline: 0px;
    position:relative;
float:left;
}

.search-submit {
    width: 30px;
    height: 30px;
    display: table-cell;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
    position:absolute;
    float:left;

}