無法正確定位輸入元素與CSS

Question

我有一個表格正在充滿動態生成的下拉菜單。

我已經在建議中將display屬性設置爲'table'，以便在添加元素時保持容器居中。

我的問題是，我使用輸入類型=圖像而不是按鈕來提交表單，並且當添加動態下拉區域時，此圖像不會留在容器中。只要添加一個下拉列表，包含表單的div的寬度增加就會將'按鈕'向下推到下一行，而我想保持內聯。

ps我已經嘗試添加顯示：內聯，但這不工作。

<div id="searchBar"> 
<div id="searchwrapper">  
      <form name="search_input"> 
     I am looking for a  
    <div id="sBar1" style="display:inline;"> 
    <select id="search_level" class="selectSearchBar" name="search_level"> 
    <?php 
     echo "<option>Level</option>"; 
     while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){ 
       echo "<option value=".$row['id'].">".$row['level']."</option>"; 
       } 
      ?>    
       </select> 
        </div> 
    <div id="sBar2" class="selectSearchBar"></div> 
    <div id="sBar3" class="selectSearchBar"></div> 
    tutor in <input type=text class="searchbox" id="location" value="Location"/> 
    <input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form> 
      </div> 
</div> 

和相應的CSS：

#searchBar{ 
width:940; 
margin: 0px auto; 
} 


#searchwrapper{ 
display: table; 
margin: 0 auto; 
min-width:600px; 
padding-top: 10px; 
background: red; 
} 


#searchwrapper form { 

} 

.searchbox { 
border:0px; /*important*/ 
background-color:transparent; /*important*/ 
position:absolute; /*important*/ 
width:200px; 
height:40px; 
border-radius:9px; 
font-size: inherit; 
} 

.searchbox_submit { 
border:0px; /*important*/ 
background-color:transparent; /*important*/ 
position:absolute; /*important*/ 
} 
.selectSearchBar{ 
    height:40px; 
    width:137px; 
    display:inline; 
    background-image: url('../images/up_down_arrows.png'); 
    background-position: right center; 
    background-repeat:no-repeat; 
    margin:3px 1px 0px 0px; 
    border-radius:9px; 
} 

此圖片是什麼，我想也就是在行

結束的圖標，這是問題的每個選擇動態添加後：

Answer 1

如果我這樣做，我會從以下HTML開始：

<div id="searchBar"> 
    <div id="searchwrapper"> 
     <form name="search_input">I am looking for a 
      <div id="sBar1" class="selectSearchBar"> 
       <select id="search_level1" class="selectSearchBar" name="search_level"> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
       </select> 
      </div> 
      <div id="sBar2" class="selectSearchBar"> 
       <select id="search_level2" class="selectSearchBar" name="search_level"> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
       </select> 
      </div> 
      <div id="sBar3" class="selectSearchBar"> 
       <select id="search_level3" class="selectSearchBar" name="search_level"> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
        <option value="1">Option 1</option> 
       </select> 
      </div>tutor in 
      <input type=text class="searchbox" id="location" value="Location" /> 
      <input type=image src="http://placehold.it/20x20 " class="searchbox_submit" name="searchbox_submit" value=""> 
     </form> 
    </div> 
</div> 

在您選擇的元素上，確保id的值是唯一的。

對於CSS：

#searchBar { 
    width: 940px; 
    margin: 0px auto; 
    border: 1px dotted blue; 
    text-align: center; 
} 
#searchwrapper { 
    min-width: 600px; 
    padding: 10px 0; 
    background: red; 
    display: inline-block; 
} 
#searchwrapper form { 
} 
div.selectSearchBar { 
    display: inline-block; 
    vertical-align: middle; 
} 
select.selectSearchBar { 
    width: 137px; 
    height: 40px; 
    border-radius: 9px; 
    display: inline-block; 
} 
.searchbox { 
    width: 200px; 
    padding: 5px; 
    border-radius: 9px; 
    font-size: inherit; 
    vertical-align: middle; 
} 
.searchbox_submit { 
    vertical-align: middle; 
} 

看到工作演示：http://jsfiddle.net/audetwebdesign/Kjby6/

如何工作

的策略是保持在一個單一的行中的所有元素，所以你要使用浮動或內聯塊或內聯元素。

讓我們用兩個簡單的元素，.searchbox和.searchbox_submit開始，無論是與內聯input元素，所以沒有必要做任何事情，除了調整與vertical-align: middle的垂直位置（我的選擇，但請調整你認爲合適） 。

div.selectSearchBar默認爲塊級元素，所以設置爲display: inline-block和vertical-align: middle。

對於select.selectSearchBar，請指定高度和邊框半徑，並在需要添加邊距或邊距或任何可能需要的樣式時使用display: inline-block。

現在，您的所有元素都坐在水平線上，並使用vertically-align: middle將輸入元素與內嵌文本相關聯。

這些元素被#searchwrapper括起來，所以我想讓這個方塊縮小以適合內容，所以使用display: inline-block，爲視覺格式添加填充。

最後，爲中心#searchwrapper，使用text-align: center爲#searchBar父容器。

Answer 2

您需要增加主容器的寬度，#searchBar（當前940px）或減少「位置」輸入字段的寬度，以便搜索圖標/提交按鈕剩餘空間。問題是，在添加額外的選擇下拉菜單後，當前寬度不足以將所有內容放在一行上。

由於有很多文字未填充的空白空間，您可以輕鬆地減少「位置」輸入的寬度。