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

【问题标题】：Input field & submit button won't fit in containing element输入字段和提交按钮不适合包含元素
【发布时间】：2013-10-29 12:44:53
【问题描述】：

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

似乎输入字段 .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>

【问题讨论】：

所以你正在寻找这样的东西？ jsfiddle.net/Agony/xCp4B
您好，希望我的回答对您有所帮助...

标签： html css search input

【解决方案1】：

替换下面的类

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

    display: table-cell;

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

【讨论】：

这不是我想要的完全，但它成功了。非常感谢！

【解决方案2】：

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

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

【讨论】：

这些表格被用作一种技巧，我也曾在我网站的其他部分使用过。然而，它似乎在这里不起作用。我尝试了你的替代方法，起初它似乎运作良好。但后来我发现每当我在输入元素上添加填充时都会出现问题。不过我可能做错了什么。
@Swen，是的，padding 属性默认添加到 width，除非您包含 box-sizing: border-box; 属性 :) 在链接的问题中做了同样的事情

【解决方案3】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;

}

【讨论】：

您好，抱歉，我已经发布了另一个答案。我希望这是现在。