将引导程序组件放置在一条直线上

Question

我在Bootstrap HTML页面上工作，我想在BOOKS下拉菜单的右侧放置搜索字段和按钮。

但是，使用该代码，搜索按钮将位于搜索字段的下方。 提供了代码，

<div id="navbar">

                <!-- left components of the navbar -->
                <ul class="nav navbar-nav navbar-left">


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">BOOKS <span class="caret"></span></a>
                        <ul class="dropdown-menu">

                            <li><a href="#">BROWSE THE BOOKSELF</a></li>

                            <li class="divider" role="separator"></li>
                            <li><a href="#">STORE HOURS &amp; DIRECTIONS</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </li>

                    <!-- book search -->
                    <form class="navbar-form">
                        <div class="form-group">
                            <input class="form-control" type="text" name="keyword" placeholder="Book Search">  
                        </div>
                        <button type="submit" class="btn btn-default">SEARCH</button>
                    </form>


                </ul>

                <!-- right components of the navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">SHOPPING CART</a></li>
                    <li><a href="#">MY ACCOUNT</a></li>
                    <li><a href="#">LOGOUT</a></li>
                </ul>
            </div>
            <!-- navbar div -->

使用代码后的样子是这样，

如何将SEARCH按钮放在输入字段的右侧？

UPDATE

如果将<button>放在<div>标记内，则总体上看起来如下所示，也不是理想的选择。

            <!-- book search -->
            <form class="navbar-form">
                <div class="form-group">
                    <input class="form-control" type="text" name="keyword" placeholder="Book Search">  
                <button type="submit" class="btn btn-default">SEARCH</button>
                </div>
            </form>

Answer 1

使用inline-flex

.navbar-form{
  display:inline-flex;
}

flexbox的完整指南 。

Answer 2

  <!-- book search --> <form class="navbar-form"> <div class="form-group"> <input class="form-control" type="text" name="keyword" placeholder="Book Search"> <button type="submit" class="btn btn-default">SEARCH</button> </div> </form> 

作品..您已将DIV标签放在外面。