Исправить положение кнопки на сайте html - PullRequest
Новая
       17

Исправить положение кнопки на сайте html

0 голосов
/ 25 августа 2018

Когда я меняю страну из выпадающего списка, «кнопка поиска» движется.Я хочу, чтобы он был исправлен справа, как кнопка «страна» зафиксирована слева.enter image description here

Кнопка выбора страны: 

                <div class="dropdown" >
                <button class="dropbtn" id="countryNameBtn">Select country</button>
                <div class="dropdown-content">
                    <a href="#" onclick="selectRomania()">Romania</a>
                    <a href="#" onclick="selectSpain()">Spain</a>
                    <a href="#" onclick="selectFrance()">France</a>
                </div>
            </div>

Кнопка поиска: 

    <div class="goButton">
<button class="buttonSearch" style="vertical-align:middle" onclick="searchCity()"><span class="spanSearch">Search</span></button>
</div>

CSS: 

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    border: 2px solid white;
    border-radius: 4px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 1em;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: white;
    color: #43565C;
}
.goButton {
  margin-top: 2%;
  margin-right: -10%;
}
.buttonSearch {
  display: inline-block;
  border-radius: 4px;
  background-color: none;
  border: 1px solid white;
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  padding: 7px;
  width: 27%;
  transition: all 0.5s;
  cursor: pointer;
}

Как я могу исправить положение кнопки поиска?Я пытался с position:fixed, но он не работает.

1 Ответ

0 голосов
/ 25 августа 2018

Вы должны использовать систему сетки начальной загрузки.Вы можете увидеть детали и скачать их по этой ссылке: https://getbootstrap.com/docs/3.3/css/#grid

Для вашего вопроса это должно быть так: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            border: 2px solid white;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            .dropdown-content a {
                color: black;
                padding: 8px 12px;
                text-decoration: none;
                display: block;
                font-size: 1em;
            }

                .dropdown-content a:hover {
                    background-color: #f1f1f1
                }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropbtn {
            width: 100%;
        }

        .dropdown:hover .dropbtn {
            background-color: white;
            color: #43565C;
        }

        .goButton {
            margin-top: 2%;
            margin-right: -10%;
        }

        .buttonSearch {
            display: inline-block;
            border-radius: 4px;
            background-color: none;
            border: 1px solid white;
            color: #FFFFFF;
            text-align: center;
            font-size: 12px;
            padding: 7px;
            transition: all 0.5s;
            cursor: pointer;
            width: 100%;
        }
    </style>

</head>
<body>
    <div class="row">
        <div class="col-md-2">
            <button class="dropbtn" id="countryNameBtn">Select country</button>
            <div class="dropdown-content">
                <a href="#" onclick="selectRomania()">Romania</a>
                <a href="#" onclick="selectSpain()">Spain</a>
                <a href="#" onclick="selectFrance()">France</a>
            </div>
        </div>
        <div class="col-md-2">
            <button class="buttonSearch" style="vertical-align:middle" onclick="searchCity()"><span class="spanSearch">Search</span></button>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Поскольку вы в этом коде должны использовать файлы начальной загрузки с CDNили вы можете скачать его и сослаться на него из ваших файлов.

Затем вы можете использовать элемент div с классом строк, это сделает всю строку для вас.Затем вы можете разделить свое пространство на стандартные и адаптивные столбцы.

Мы можем использовать div с классами col-md-X.Для получения дополнительной информации прочитайте ссылку выше.Таким образом, каждый элемент имеет свое пространство и не влияет на другие.

Надеюсь, это помогло вам.

Если у вас есть какие-либо вопросы, прокомментируйте их ниже.

...