Fatal编程技术网
  • javascript/
  • Javascript 如何将导航菜单与搜索栏和下拉选项卡对齐？

Javascript 如何将导航菜单与搜索栏和下拉选项卡对齐？

javascript html css bootstrap-4

Javascript 如何将导航菜单与搜索栏和下拉选项卡对齐？,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我做了一个导航栏，里面有一个搜索表单，几个链接，还有一个下拉到更多链接的链接 然而，我似乎无法找到一种方法使所有内容都在导航栏的同一条线上。 以下是当前的输出： 这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="

我做了一个导航栏，里面有一个搜索表单，几个链接，还有一个下拉到更多链接的链接

然而，我似乎无法找到一种方法使所有内容都在导航栏的同一条线上。

以下是当前的输出：

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
    <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>

  </div>

</div>

</body>
</html>


*{框大小：边框框；}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.search容器{
浮动：无；
}
.topnav a、.topnav输入[type=text]，.topnav.search容器按钮{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}
下拉列表
正如您所看到的，下拉菜单与其他链接的顺序不符。是否有任何方法可以将“下拉”链接与其他链接与下拉选项卡内的下拉链接对齐，直到您将鼠标悬停在其上？我整天都在想这个问题，所以任何想法或建议都会有所帮助。

下面的示例对齐下拉按钮和搜索栏：

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.search容器{
浮动：无；
}
.topnav a，
.topnav输入[类型=文本]，
.topnav.search容器按钮{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}

下拉列表
下面的示例对齐下拉按钮和搜索栏：

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
浮动：对；
}
.topnav输入[类型=文本]{
填充：6px；
边缘顶部：8px；
字号：17px；
边界：无；
}
.topnav.search容器按钮{
浮动：对；
填充：6px 10px；
边缘顶部：8px；
右边距：16px；
背景：ddd；
字号：17px；
边界：无；
光标：指针；
}
.topnav.search容器按钮：悬停{
背景：#ccc；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.search容器{
浮动：无；
}
.topnav a，
.topnav输入[类型=文本]，
.topnav.search容器按钮{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}

下拉列表
您没有为下拉部分提供任何样式，这就是它未对齐的原因

在这里，我对HTML部分做了一些更改，并添加了所需的CSS。希望这有帮助

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
}
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
.topnav.search容器{
弗洛