无法对齐搜索栏旁边的按钮答案

【问题标题】：Cannot align button beside search bar无法对齐搜索栏旁边的按钮
【发布时间】：2020-05-08 05:41:28
【问题描述】：

我正在尝试在下拉按钮旁边对齐搜索栏。我已经尝试对齐它们，但它不起作用。这两个按钮也位于一个容器中，因此搜索栏是容器宽度的 100%。我也尝试过 align-left、align-right 和 alight-center。我还将按钮的显示更改为“flex”。

我当前的按钮如下所示：-

.has-search .form-control {
    padding-left: 38px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

 <!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/mystyle.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/app.js"></script>
        <script src="js/restaurants.js"></script>
    </head>
<body onload="getRestaurantData()">
        <!-- This is where top navigation html codes is -->
        <div w3-include-html="top-navigation.html"></div>
        <!-- This is the container that holds the initial message, heading, and movies -->



        <div class="container">
        <!-- The message will be shown when the page loads and will
        disappear after the movies are loaded -->



            <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
            </div>

            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            <br><br>


            <!-- Displays thumbnails of the movies here -->
            <div id="restaurantsTable" class="row"></div>
        </div>
        <br><br>
        <!-- Include footer here -->
        <div w3-include-html="footer.html"></div>
    </body>
<script src="js/w3.js"></script>
<script>
        //to bring in other HTML on the fly into this page
        w3.includeHTML();
</script>
</html>

【问题讨论】：

两者在同一个容器中，但不在同一行

标签： html css button bootstrap-4

【解决方案1】：

更改 HTML 代码，如

<div class="container">
        <!-- The message will be shown when the page loads and will
        disappear after the movies are loaded -->

<div class="d-flex"> /*Changes Here*/
    <div class="dropdown col"> /*Changes Here*/
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
            </div>

            <div class="input-group col-12 flex-fill"> /*Changes Here*/
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            </div>


            <!-- Displays thumbnails of the movies here -->
            <div id="restaurantsTable" class="row"></div>
        </div>

https://jsfiddle.net/lalji1051/eajpcuh3/2/

【讨论】：

【解决方案2】：

.container {
  display: flex
}

这将使下拉菜单和搜索栏并排对齐，然后您可以根据需要设置间距。

【讨论】：

恕我直言，更改框架类属性不是最好的主意。而且您还必须进行更多调整才能获得更好的视野。例如，按照您建议的方式，我们必须处理拉伸搜索按钮。

【解决方案3】：

如果您已经在使用引导程序，我建议您使用它的可能性。

主要思想是具有flex 属性的元素应该围绕您要使用的项目。

在您的情况下，将类 d-flex 添加到 your<div class="container">。但最好使用该类创建单独的 div，围绕 dropdown 和 input-group。它将提供更多操纵的机会。然后要在dropdown 之后添加一些空格，您可以添加到该 div，例如 mr-2 类，它会从右侧添加边距。

结果是这样的。

.has-search .form-control {
    padding-left: 38px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/mystyle.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/app.js"></script>
        <script src="js/restaurants.js"></script>
    </head>
<body onload="getRestaurantData()">
        <!-- This is where top navigation html codes is -->
        <div w3-include-html="top-navigation.html"></div>
        <!-- This is the container that holds the initial message, heading, and movies -->



        <div class="container">
        <!-- The message will be shown when the page loads and will
        disappear after the movies are loaded -->



            <div class="d-flex">
                <div class="dropdown mr-2">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">HTML</a></li>
                          <li><a href="#">CSS</a></li>
                          <li><a href="#">JavaScript</a></li>
                        </ul>
                </div>

                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search this blog">
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </div>
                </div>
            </div>
            <br><br>


            <!-- Displays thumbnails of the movies here -->
            <div id="restaurantsTable" class="row"></div>
        </div>
        <br><br>
        <!-- Include footer here -->
        <div w3-include-html="footer.html"></div>
    </body>
<script src="js/w3.js"></script>
<script>
        //to bring in other HTML on the fly into this page
        w3.includeHTML();
</script>
</html>

【讨论】：