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

我想在同一行上水平对齐表单文本输入和按钮，同时给按钮响应布局的最小宽度。出于某种原因，最小宽度强制到一个新行按钮搜索输入和按钮不正确水平对齐

.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

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

回答

相关问题