修复一个按钮位置网站html答案

【问题标题】：Fix a button position website html修复一个按钮位置网站html
【发布时间】：2018-08-25 07:39:56
【问题描述】：

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

选择国家按钮：

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

【问题讨论】：

也添加你的css代码！
将它们放在一个 100% 宽度的 div 中。然后将国家按钮向左浮动 (float: left)，将搜索按钮向右浮动 (float: right)。然后，无论另一个按钮的宽度如何，它们都会保持原位。您可能还想添加一个margin 来定位它们。

标签： html css button position

【解决方案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 元素与 row 类一起使用，这将为您制作一整行。然后，您可以将空间拆分为标准列和响应列。

我们可以将 div 与 col-md-X 类一起使用。有关更多信息，请阅读上面的链接。这样每个元素都有自己的空间，不会对其他元素产生任何影响。

希望对你有所帮助。

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

【讨论】：