Question

我正在尝试设计一个具有自动完成下拉菜单的搜索栏，例如Google。但是，下拉列表的宽度不如搜索栏

它可以在MICROSOFT EDGE上工作，但不能在GOOGLE CHROME上工作

我尝试将宽度更改为auto和device-width，但是我看不到自动完成下拉菜单的宽度

.input-group-btn { 宽度：自动;

}

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
	background:#202a3f;
}
.container{
	margin-top:200px;
}
.glyphicon-search{
	font-size:20px;
}

.btn-default{
	background: orange;
	width:100px;
	padding:12.5px;
}

.form-control{
	padding:25px;
	font-size:20px;
	
}

.input-group-btn{
width:auto;


}

}
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
}
</style>
</head>
<body>
<div class="navbar" >
  <a href="#home" >Home</a>
  <a href="#favorites">Favorites</a>
  <div class = "dropdown">
	<button class="dropbtn">Genre
		<i class = "fa fa-caret-down"></i>
	</button>
	<div class ="dropdown-content">
		<a href="#">Drama</a>

  </div>
  </div>
</div>

  <div class="container">
    <form action="/action_page.php">
		<div class = "input-group">
			<input type="text" class = "form-control" placeholder="Search" name="search">
			<div class ="input-group-btn ">
			<button  type="submit" class = "btn btn-default">
			<i class="glyphicon glyphicon-search"></i></button>
			</div>
			</div>
	</form>
  </div>



</body>


</html>

当我将宽度设置为auto或device-width时，下拉列表的确很小，但是，如果宽度是某个巨大的实际数字（例如1000px或30000px），则整个搜索栏的宽度都会缩小，然后下拉列表的宽度搜索栏。

enter image description here

Answer 1

我对您的了解是多少，您希望增加搜索输入框的宽度，并且自动完成功能低于100％，就像提供给您的搜索输入框一样。首先包括jquery.min.js，用于删除控制台中显示的jquery错误。之后，要做一些我在您的CSS和HTML中所做的更改，以解决该问题。

body{
  background:#202a3f;
}

.form {
  float: left;
  width: 100%;
}

.custom-layout{
  position: relative;
  float: left;
  width: 100%;
  border-collapse: separate;
}

.custom-layout button{
  position: absolute;
  right: 0;
  float: left;
}

.container{
  margin-top:200px;
}

.glyphicon-search{
  font-size:20px;
}

.btn-default{
  background: orange;
  width:100px;
  padding:12.5px;
}

.form-control {
  padding:25px;
  font-size:20px;
}

.navbar {
overflow: hidden;
background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="navbar" >
   <a href="#home" >Home</a>
   <a href="#favorites">Favorites</a>
   <div class = "dropdown">
      <button class="dropbtn">Genre
      <i class = "fa fa-caret-down"></i>
      </button>
      <div class ="dropdown-content">
         <a href="#">Drama</a>
      </div>
   </div>
</div>

<div class="container">
   <form action="/action_page.php" class="form">
      <div class = "input-group custom-layout">
         <input type="text" class = "form-control" placeholder="Search" name="search">
         <div class ="input-group-btn">
            <button  type="submit" class = "btn btn-default">
            <i class="glyphicon glyphicon-search"></i></button>
         </div>
      </div>
   </form>
</div>

自动完成下拉搜索宽度调整

1 个答案: