搜索輸入和按鈕不正確水平對齊

我想在同一行上水平對齊表單文本輸入和按鈕，同時給按鈕響應佈局的最小寬度。出於某種原因，最小寬度強制到一個新行按鈕搜索輸入和按鈕不正確水平對齊

.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/任何幫助，將不勝感激

來源

2014-10-08 Jizbo Jonez

嘗試ŧ他 - http://jsfiddle.net/L5Lknas9/ – Anonymous 2014-10-08 16:17:18

http://jsfiddle.net/lalu050/dnssmw83/23/ ..使用浮法：左... – Lal 2014-10-08 16:19:15

感謝瑪麗和拉爾，這不是壞事，但如果你調整大小瀏覽器窗口縮小了按鈕的容量。這怎麼能被阻止？你知道這個按鈕是否可以動態化？ – 2014-10-08 16:19:59

小提琴你可以通過使用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; 
}

來源

2014-10-08 16:35:39 Anonymous

搜索輸入和按鈕不正確水平對齊

回答

相關問題