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;
}

完成guide of flexbox。

Answer 2

＆＃13;

                    <!-- 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>

＆＃13;

作品..你把DIV标签放在了外面。

将引导组件放在一条线上

2 个答案: