输入字段＆amp;提交按钮不适合包含元素

Question

我试图使我的搜索栏具有流畅的输入字段宽度，同时还要进行搜索＆＃39;旁边的按钮。

输入字段 .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;和display: table-cell;？它让我想起了编码的唯一方法是使用表格的日子......

如果我可以建议an alternative way做同样的事情并且可以说做得更好:) - 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;

}