Html 搜索输入和按钮未正确水平对齐

我试图将表单文本输入和按钮水平对齐在同一行上，同时为按钮提供最小宽度，以获得响应性布局。出于某种原因，最小宽度会强制按钮位于新行上

.search-container{
    width:100%;
    border: 1px solid #000;
    display:block;
 }
.search-text-container {
    width:90%;
    display:inline-block;
}

.search-text-container input {
    width:100%;
    height:30px;
}

.round-icon-container {
    width:10%;
    display:inline-block;
}
.round-icon-button {
    min-width:30px;
    display:block;
    width:30px;
    height:30px;
    line-height:normal;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-weight:bold;
}
.round-icon-button:hover {
    background: #262626;
}

<div class="search-container">
    <span class="search-text-container">
        <form action="">
            <input type="text" name="fname" />
        </form>
    </span>
    <span class="round-icon-container">
        <button type="submit" class="round-icon-button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

。搜索容器{
宽度：100%；
边框：1px实心#000；
显示：块；
}
.搜索文本容器{
宽度：90%；
显示：内联块；
}
.搜索文本容器输入{
宽度：100%；
高度：30px；
}
.圆形图标容器{
宽度：10%；
显示：内联块；
}
.圆形图标按钮{
最小宽度：30px；
显示：块；
宽度：30px；
高度：30px；
线高：正常；
边框：2倍实心#F5；
边界半径：50%；
颜色：#F5；
文本对齐：居中；
文字装饰：无；
背景#4646；
长方体阴影：0 3px灰色；
字体大小：粗体；
}
.圆形图标按钮：悬停{
背景：#262626；
}

---

我这里有一些我正在做的事情，如果您能提供帮助，我将不胜感激。

您可以通过使用CSS实现这一点，如下所示：

JSFiddle-

---

试试这个-。。二手浮动：左…谢谢Mary和Lal，这还不错，但是如果你将浏览器窗口调整到某个狭窄的位置，按钮就会从容器中断裂出来。如何防止这种情况？你知道吗？如果我调整浏览器的大小，使圆形图标容器的跨度小于图标的宽度（30px），那么使用CSS@media queries进行小屏幕查询-Firefox（最新版本）中的Lal@玛丽：我认为这是最好的解决办法，谢谢。如果你给这个问题加上你的答案，如果你愿意，我会打勾的。干杯

* {
    box-sizing:border-box;
}
@media(max-width:320px) {
    .search-text-container {
        width:70% !important;
    }
    .round-icon-container {
        width:30% !important;
    }
}
.search-container {
    width:100%;
    border: 1px solid #000;
    display:block;
    font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
    font-size: 16px; /* add the font-size to child span elements */
    vertical-align: middle;
}