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

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

第一步 - 添加 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>

రెండవ అడుగు - సిఎస్ఎస్ జోడించండి:

* {బాక్స్-ఇంస్క్రిప్షన్: బార్డర్-బాక్స్;}
/* ప్రధానవిభాగం శైలిని అమర్చండి */
.ప్రధానవిభాగం {
  ఓవర్ఫ్లోవ్: హిడ్;
  బ్యాక్గ్రౌండ్-కలర్: #e9e9e9;
}
/* ప్రధానవిభాగం లింకుల శైలిని అమర్చండి */
.ప్రధానవిభాగం a {
  ఫ్లోట్: ఎడమ;
  డిస్ప్లే: బ్లాక్;
  రంగు: బ్లాక్;
  టెక్స్ట్-అలైన్: మధ్య;
  ప్యాడింగ్: 14px 16px;
  టెక్స్ట్-డెక్రీప్షన్: నాన్;
  ఫాంట్-సైజ్: 17px;
}
/* మౌస్ మీడియా ప్రధానవిభాగం లింకుల్లో ఉన్నప్పుడు శైలిని అమర్చండి */
.ప్రధానవిభాగం a:హోవర్ {
  బ్యాక్గ్రౌండ్-కలర్: #ddd;
  రంగు: బ్లాక్;
}
/* ప్రస్తుతం/క్రియాశీల లింకుని శైలిని అమర్చండి */
.ప్రధానవిభాగం a.active {
  బ్యాక్గ్రౌండ్-కలర్: #2196F3;
  రంగు: తెలుపు;
}
/* శోధనా కంటైనర్ శైలిని అమర్చండి */
.ప్రధానవిభాగం .శోధనా కంటైనర్ {
  ఫ్లోట్: రైట్;
}
/* ప్రధానవిభాగం లోని ఇన్పుట్ ఫీల్డ్ శైలిని అమర్చండి */
.ప్రధానవిభాగం input[type=text] {
  ప్యాడింగ్: 6px;
  మార్జిన్-టాప్: 8px;
  ఫాంట్-సైజ్: 17px;
  బోర్డర్: నాన్;
}
/* శోధనా కంటైనర్ లోని బటన్ శైలిని అమర్చండి */
.ప్రధానవిభాగం .శోధనా కంటైనర్ బటన్ {
  ఫ్లోట్: రైట్;
  ప్యాడింగ్: 6px;
  మార్జిన్-టాప్: 8px;
  మార్జిన్-రైట్: 16px;
  బ్యాక్గ్రౌండ్: #ddd;
  ఫాంట్-సైజ్: 17px;
  బోర్డర్: నాన్;
  కర్సర్: పాయింటర్;
}
.ప్రధానవిభాగం .శోధనా కంటైనర్ బటన్:హోవర్ {
  బ్యాక్గ్రౌండ్: #ccc;
}
/* ప్రతిస్పందకతను జోడించండి - చిన్న స్క్రీన్ లో, విస్తరణ కాకుండా ఉప్రితిలో విస్తరణ */
@మీడియా స్క్రీన్ అండ్ (మాక్స్-వెడల్పు: 600px) {
  .ప్రధానవిభాగం .శోధనా కంటైనర్ {
    ఫ్లోట్: నాన్;
  }
  .ప్రధానవిభాగం a, .ప్రధానవిభాగం input[type=text], .ప్రధానవిభాగం .శోధనా కంటైనర్ బటన్ {
    ఫ్లోట్: నాన్;
    డిస్ప్లే: బ్లాక్;
    టెక్స్ట్-అలైన్: ఎడమ;
    వెడల్పు: 100%;
    మార్జిన్: 0;
    ప్యాడింగ్: 14px;
  }
  .ప్రధానవిభాగం input[type=text] {
    border: 1px solid #ccc;
  }
}

亲自试一试