Question

我制作了一个带有搜索表单的导航栏，一些链接以及一个具有下拉菜单的链接。

但是，我似乎找不到一种将所有内容都放在导航栏同一行上的方法。

这是现在的输出：My HTML Page

这是我的代码：

function BindDDlLocation(CountryId) {
var ddlLocation = $("#ddlLocation");
$.ajax({
    url: RootUrl + '/Home/BindMasterDropDown',
    type: "GET",
    data: { TableType: 'tbllocation', RegionId: '0', Country_id: CountryId, Categ_Id: '0', SubCateg_Id: '0', EntityID: '0', DepartmentID: '0' },
    datatype: 'json',
    async: false,
    success: function (result) {
        $("#ddlLocation").html('');
        ddlLocation.append($("<option></option>").val('').html('--select--'));
        $.each(result, function (key, value) {
            ddlLocation.append($("<option></option>").val(value.ID).html(value.vDescription));
        });
        //alert("location binded");
        $("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.' });
        $(".SumoSelect").css('margin-top', '15px');
    },
    error: function (err) {
        alert(err.statusText);
    }
});

如您所见，下拉菜单与其他链接不匹配。在将鼠标悬停在“下拉列表”选项卡上之前，有什么方法可以将“下拉列表”链接与其他带有下拉链接的链接对齐？我整日忙于此，所以任何想法或建议都将有所帮助。

Answer 1

在下面的示例中，将下拉按钮和搜索栏对齐：

    * {
      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;
      }
    }

<!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">

</head>

<body>
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <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 class="dropdown" style="padding: 14px 16px;">
      <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>
</body>

</html>

Answer 2

您没有在下拉部分中添加任何样式，这就是未对齐的原因。

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

* {
  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;
  }
}


/* dropdown part CSS*/

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
}

.dropdown:hover .dropbtn {
  background-color: Blue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

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

</head>

<body>
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <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 class="dropdown">
      <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>

  </div>
</body>

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

2 个答案: