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

Question

我有一个表单，其中填充了动态生成的下拉菜单。

我已根据建议将显示属性设置为“表格”，以便即使在添加元素时也能使容器居中。

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

这张图片是我想要的，即行尾的图标

这是动态添加每个select后的问题:

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/

这是如何运作的

策略是将所有元素保持在一行中，因此您要使用 float 或内联 block 或内联元素。

让我们从两个最简单的元素开始，.searchbox 和 .searchbox_submit，它们都是内联的 input 元素，所以不需要做任何事情，除了用 vertical-align: middle 调整垂直定位(我的选择，但请按你认为合适的方式调整)。

div.selectSearchBar默认是 block 级元素，所以设置display: inline-block和vertical-align: middle。

对于 select.selectSearchBar，指定高度和边框半径并使用 display: inline-block 以防您想要添加边距或填充或您可能需要的任何内容用于造型。

现在，您的所有元素位于一条水平线上，并使用 vertically-align: middle 相对于内联文本放置您的输入元素。

这些元素包含在 #searchwrapper 中，所以我希望这个框缩小以适合内容所以使用 display: inline-block，为视觉添加填充格式化。

最后，要使 #searchwrapper 居中，请为 #searchBar 父容器使用 text-align: center。