如何创建：菜单中的输入字段

如何在导航栏中添加输入字段

第一步 - 添加 HTML：

<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">Submit</button>
    </form>
  </div>
</div>

ບາງຄັ້ງທີສອງ - ການເພີ່ມ CSS:

* {box-sizing: border-box;}
/* ການກຳນົດຮູບແບບສະໜາມຄົ້ນຫາ */
.topnav {
  ການກຳນົດ: hidden;
  ສີສະໜາມ: #e9e9e9;
}
/* ການກຳນົດຮູບແບບຂອງຊາວສະໜາມ */
.topnav a {
  ການສະແດງ: left;
  ການສະແດງ: block;
  ສີ: black;
  ການສະແດງ: center;
  ການປຸກສານ: 14px 16px;
  ການສະແດງ: none;
  ຂະໜາດມີບາງ: 17px;
}
/* ການກຳນົດຮູບແບບຂອງຊາວທີ່ຂ້າມຫຼາຍຫຼາຍ */
.topnav a:hover {
  ສີສະໜາມ: #ddd;
  ສີ: black;
}
/* ການກຳນົດຮູບແບບຂອງຊາວ/ທາງທີ່ກຳລັງດຳເນີນ */
.topnav a.active {
  ສີສະໜາມ: #2196F3;
  ສີ: white;
}
/* ການກຳນົດຮູບແບບຂອງບໍລິສັດຄົ້ນຫາ */
.topnav .search-container {
  ການສະແດງ: right;
}
/* ການກຳນົດຮູບແບບຂອງບັນຍາບັນຊັນໃນບັນນາທິການຄົ້ນຫາ */
.topnav input[type=text] {
  ການປຸກສານ: 6px;
  ການປຸກສານ: 8px;
  ຂະໜາດມີບາງ: 17px;
  ການບອກ: none;
}
/* ການກຳນົດຮູບແບບຂອງຄຳບັນຍາບັນຊັນໃນບໍລິສັດຄົ້ນຫາ */
.topnav .search-container button {
  ການສະແດງ: right;
  ການປຸກສານ: 6px;
  ການປຸກສານ: 8px;
  ການປຸກສານ: 16px;
  ສະໜາມ: #ddd;
  ຂະໜາດມີບາງ: 17px;
  ການບອກ: none;
  ຄຳໃບ: pointer;
}
.topnav .search-container button:hover {
  ສະໜາມ: #ccc;
}
/* ການເພີ່ມຄວາມຄິດວຽກ - ໃນໜ້າສະໜາມນ້ອຍຫຼາຍຫຼາຍຫຼາຍ, ການສະແດງທີ່ຕໍ່ຕ້ານສູນສະໜາມຫຼາຍຫຼາຍຫຼາຍ */
@media screen and (max-width: 600px) {
  .topnav .search-container {
    ການສະແດງ: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    ການສະແດງ: none;
    ການສະແດງ: block;
    ການສະແດງ: left;
    ເພດ: 100%;
    ຂ້າງ: 0;
    ການປຸກສານ: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

亲自试一试