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

Question

我正在尝试将表单文本输入和按钮水平对齐在同一行上，同时为按钮提供响应式布局的最小宽度。出于某种原因，最小宽度迫使按钮换行

.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>

我对我正在做的事情有一些了解 http://jsfiddle.net/dnssmw83/19/任何帮助将不胜感激

Answer 1

您可以使用 CSS 实现 @media queries像这样:

JSFiddle - DEMO

* {
    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;
}