<div class="topnav">

  <a class="active" href="#home">主页</a>

  <a href="#about">关于</a>

  <a href="#contact">联系我们</a>

  <input type="text" placeholder="搜索..">

</div>

​

<div style="padding-left:16px">

  <h2>响应式搜索菜单</h2>

  <p>导航栏里面有一个搜索框。</p>

  <p>调整浏览器窗口的大小, 查看效果。</p>

</div>

* {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 input[type=text] {

  float: right;

  padding: 6px;

  margin-top: 8px;

  margin-right: 16px;

  border: none;

  font-size: 17px;

}

​

@media screen and (max-width: 600px) {

  .topnav a, .topnav input[type=text] {

    float: none;

    display: block;

    text-align: left;

    width: 100%;

    margin: 0;

    padding: 14px;

  }

  .topnav input[type=text] {

    border: 1px solid #ccc;  

  }

}