更新：

Question

更新解决方案： 我将无序列表移动到go按钮后面，

<div class="row">
  <form class="navbar-form suggest-holder">
   <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
     <select class="form-control input-lg">
      <option>All</option>
      <option>one</option>
      <option>two</option>
      <option>three</option>
      <option>four</option>
      <option>five</option>  

      <button type="submit" class="btn btn-primary btn-lg">Go</button>

      <ul></ul>
  </form>
</div>

并将以下内容添加到我的CSS中：

.form-control {
float: left;
}

我的标题中有一个搜索栏，它根据一小部分样本产品使用JS函数进行自动完成。

我的网站有几个可以搜索的类别，类似于亚马逊，因此在搜索输入框的右侧，有一个下拉菜单和一个“开始”按钮。

在我添加自动完成JS之前，这些是水平对齐的。现在，类别下拉菜单和转到按钮被推送到搜索输入框下方。

如何让它们再次水平对齐？我已经包含了HTML / CSS的小提琴

HTML

        <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 search-block">
                        <div class="row">
                            <form class="navbar-form suggest-holder">
                                <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
                                <ul></ul>
                                <select class="form-control input-lg">
                                    <option>All</option>
                                    <option>one</option>
                                    <option>two</option>
                                    <option>three</option>
                                    <option>four</option>
                                    <option>five</option>
                                 </select>
                                <button type="submit" class="btn btn-primary btn-lg">Go</button>
                            </form>
                        </div>
                       </div>

CSS：

.suggest-holder {

input {
    border: 1px solid $gray-lighter;
}

ul {
    list-style: none;
    border: 1px solid $gray-lighter;
    background-color: white;

    width:65%;
}

li {
    padding: 5px;
     position: inherit;
}

li:hover {
    cursor: pointer;
}

li:hover, li.active {
    background: rgba(100,100,100,.2);
}
}

.suggest-name {
font-weight: bold;
display: block;
margin-left: 40px;
}

.suggest-sku {
font-style: italic;
font-size:$font-size-small;
color: $gray-light;
}

.suggest-image {
height: 35px;
float: left;
padding-right: 5px;
margin-top: -20px;
}    

header .search-block {

input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 65% !important;

    @media (max-width:$screen-xs) {
        width: 47% !important;
    }
}

select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: -5px;
    width: 20% !important;

    @media (max-width:$screen-xs) {
        width: 30% !important;
    }
}

button {
    vertical-align: top;
    width: 14% !important;

    @media (min-width:$screen-lg) {
        width: 8% !important;
    }

    @media (max-width:$screen-xs) {
        width: 21% !important;
    }
}
.form-group {
    > form {
        > * {
            display: inline-block;
        }

        @media (max-width:$screen-xs) {
            text-align: center;
            margin-left: 0;
            margin-right: 0;
            @include pad-sides(0);
        }
    }
}
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

JS

var data = [
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'apples',
                    sku: '61583318'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'oranges',
                    sku: '924335'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'grapes',
                    sku: '73940'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'strawberries',
                    sku: '66155'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'string beans',
                    sku: '112509'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'apricot',
                    sku: '112984'
                }
            ];

            // Suggest section holder
            var $suggestedHL = $('.suggest-holder');
            // Suggestions UL
            var $suggestedUL = $('ul', $suggestedHL);
            // Suggestions LI
            var $suggestedLI = $('li', $suggestedHL);
            // Selected Items UL
            var $selectedUL = $('#selected-suggestions');
            // Keyboard Nav Index
            var index = -1;

            function addSuggestion(el){
                $selectedUL.append($('<li>' + el.find('.suggest-name').html() + '</li>'));
            }

            $('input', $suggestedHL).on({
                keyup: function(e){
                    var m = false;
                    if(e.which == 38){
                        if(--index < 0){
                            index = 0;
                        }

                        m = true;
                    }else if(e.which == 40){
                        if(++index > $suggestedLI.length - 1){
                            index = $suggestedLI.length-1;
                        }

                        m = true;
                    }

                    if(m){
                        // Remove the active class
                        $('li.active', $suggestedHL).removeClass('active');
                        $suggestedLI.eq(index).addClass('active');
                    }else if(e.which == 27){
                        index = -1;
                        // Esc key
                        $suggestedUL.hide();
                    }else if(e.which == 13){
                        // Enter key
                        if(index > -1){
                            addSuggestion($('li.active', $suggestedHL));
                            index = -1;
                            $('li.active', $suggestedHL).removeClass('active');
                        }
                    }else{
                        index = -1;
                        // Clear the ul
                        $suggestedUL.empty();

                        // Cache the search term
                        $search = $(this).val();

                        // Search regular expression
                        $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

                        // Loop through the array
                        for(var i in data){
                            if(data[i].name.match($search)){
                                $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-sku'>" + data[i].sku + "</span><img src=" + data[i].image + " class='suggest-image'/></li>"));
                            }
                        }


                        // Show the ul
                        $suggestedUL.show();
                    }
                    if($(this).val() == ''){
                        $suggestedUL.hide();
                    }
                },
                keydown: function(e){
                    if(e.which == 38 || e.which == 40 || e.which == 13){
                        e.preventDefault();
                    }
                },
                focus: function(e){
                    if($(this).val() != ''){
                        $suggestedUL.show();
                    }
                }
            });

            $suggestedHL.on('click', 'li', function(e){
                addSuggestion($(this));
            });

            $('body').on('click', function(e) {
                if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
                    $suggestedUL.hide();
                };
            });

https://jsfiddle.net/sox0sxmz/1/

Answer 1

尝试将display: inline-block放在所有元素上。例如。 form > * { display: inline-block;}。 JSfiddle

您还可以使用float: left来获得额外的边距JSfiddle。

更新：

使用：

.form-control {
  float: left;
}

JSfiddle

Answer 2

在导致问题的选择框之前有一个无序列表。它被定义为display：block并强制选择框和按钮到下一行。

Answer 3

您需要输入的另一个包装器和显示结果的ul元素。然后你需要带有display-inline的元素。

这里是你的jsfiddle：https://jsfiddle.net/sox0sxmz/8/

<div id-"my-container">
                                      <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
                                    <ul></ul>      
                                    </div>

然后将float：left应用于容器。

CSS：

form > * {
  display: inline-block;
}
#my-container{
  float: left;
}

CSS / HTML / JS Line up divs带下拉搜索预览

3 个答案:

更新：