Невозможно выровнять кнопку рядом с панелью поиска - PullRequest
Новая
       39

Невозможно выровнять кнопку рядом с панелью поиска

0 голосов
/ 22 января 2020

Я пытаюсь настроить строку поиска рядом с кнопкой раскрывающегося списка. Я пытался выровнять их, но это не работает. Обе кнопки также находятся в контейнере, поэтому строка поиска составляет 100% ширины контейнера. Я также попытался выровнять по левому, по правому и по центру. Я также изменил отображение кнопки на «flex».

Мои текущие кнопки выглядят так: -

currentui

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

Ответы [ 3 ]

0 голосов
/ 22 января 2020 
.container {
  display: flex
}

Это выровняет выпадающий список и строку поиска рядом, после чего вы можете задать интервал в соответствии с вашими требованиями.

0 голосов
/ 22 января 2020

, если вы уже используете bootstrap, я бы предложил использовать его возможности.

Основная идея заключается в том, что элемент со свойством flex должен окружать элементы, которые вы хочу работать с.

В вашем случае добавьте класс d-flex к вашему <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>
0 голосов
/ 22 января 2020

Изменение 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/

...