时间戳

首页 > 解决方案 > 自动完成下拉搜索宽度调整

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

问题描述

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

它可以在 MICROSOFT EDGE 上运行，但不能在 GOOGLE Chrome 上运行

我尝试将宽度更改为自动和设备宽度，但我发现自动完成下拉列表的宽度没有变化

.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>

当我保持宽度自动或设备宽度时，下拉菜单非常小，但是，如果宽度是一些巨大的实际数字，如 1000 像素或 30000 像素，则整个搜索栏的宽度会缩小，然后下拉菜单与搜索栏一样宽.

在此处输入图像描述 在此处输入图像描述

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

我对你的问题有多少理解是你想增加搜索输入框的宽度，并且自动完成低于 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>

在此处输入图像描述

推荐阅读