Question

当我从下拉菜单中更改国家时，“搜索按钮”正在移动。我希望将其固定在右侧，就像将“国家/地区按钮”固定在左侧一样。

选择国家（地区）按钮：

                <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，但不起作用。

Answer 1

您应该使用引导网格系统。您可以在此链接中查看详细信息并下载：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类一起使用。有关更多信息，请阅读上面的链接。这样，每个元素都有其空间，对其他元素没有任何影响。

希望这对您有所帮助。

如果您有任何问题，请在下面评论。

修复按钮位置网站html

1 个答案: