无法使用CSS正确定位输入元素

Question

我的表单中充满了动态生成的下拉列表。

我已经在建议中将display属性设置为'table'，以便在添加元素时保持容器居中。

我遇到的问题是我使用输入类型=图像而不是按钮来提交表单，并且当添加动态下拉区域时，此图像不会保留在容器中。只要添加一个下拉列表，包含表单的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

如果我这样做，我将从以下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元素，因此除了用{{{{}}调整垂直位置外，不需要做任何事情。 1}}（我的选择，但请根据需要进行调整）。

默认情况下，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。

Answer 2

您需要增加主容器的宽度，＃searchBar（当前为940px）或者减小“Location”输入字段的宽度，以便为搜索图标/提交按钮留出空间。问题是，在添加额外的选择下拉列表后，当前宽度不足以使一行上的所有内容都适合。

您可以轻松减小“位置”输入的宽度，因为文本没有填充大量空白。