1

我有一个表格，里面填满了动态生成的下拉列表。

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

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

这张图片就是我想要的，即行尾的图标 此图像显示了正确位置的图标（它太高了，但它出现在 div 的末尾，因为我需要它）

这是动态添加每个选择后的问题： 这是我添加新选择后发生的情况

4

2 回答 2

0

如果我这样做，我将从以下 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父容器。

于 2013-06-24T20:02:13.850 回答
0

您需要增加主容器的宽度，#searchBar（当前为 940 像素）或减少“位置”输入字段的宽度，以便为搜索图标/提交按钮留出空间。问题是在添加了额外的选择下拉列表后，当前的宽度不足以将所有内容都放在一行上。

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

于 2016-03-08T03:25:51.443 回答