我正在尝试将搜索栏与下拉按钮对齐。我试过对齐它们，但没有用。这两个按钮也位于容器中，因此搜索栏是容器宽度的 100%。我也试过左对齐、右对齐和居中对齐。我还将按钮的显示更改为“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 代码
<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>
关于html - 无法对齐搜索栏旁边的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59853349/