css - CSS で入力要素を正しく配置できない

Question

動的に生成されたドロップダウンで埋められているフォームがあります。

要素が追加されてもコンテナを中央に保つために、アドバイスに従って表示プロパティを「テーブル」に設定しました。

私が抱えている問題は、フォームを送信するためにボタンの代わりに input type=image を使用していて、動的ドロップダウン領域が追加されたときにこの画像がコンテナにとどまらないことです。単一のドロップダウンが追加されるとすぐに、フォームを含む div の幅が増加し、「ボタン」が次の行に押し下げられましたが、インラインのままにしたいです。

ps display: inline を追加しようとしましたが、これは機能しません。

<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

メイン コンテナ #searchBar (現在は 940 ピクセル) の幅を広げるか、「場所」入力フィールドの幅を狭くして、検索アイコン/送信ボタン用のスペースを確保する必要があります。問題は、追加の選択ドロップダウンが追加された後、現在の幅がすべてを 1 行に収めるのに十分でないことです。

テキストが埋められない空白スペースがたくさんあるので、「場所」入力の幅を簡単に減らすことができます。

Answer 2

これを行う場合、次の 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/で実際のデモを参照してください。

仕組み

戦略は、すべての要素を 1 行に保持することなので、float、inline-block、または inline 要素のいずれかを使用する必要があります。

.searchbox最も単純な 2 つの要素とから始めましょう.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、視覚的な書式設定のためにパディングを追加します。

最後に、 centerに、親コンテナー#searchwrapperに使用します。text-align: center#searchBar