Question

首先在HTML中使用无序列表创建导航栏是不是很糟糕？第二，它在网站中看起来很糟糕，我希望它位于右上角，我想将它与地图链接，但我不知道它是如何工作的，因为这是我第一次用HTML编码，所以可以有人告诉我这是怎么做的。

HTML：

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>

<li>
  <form>
    <input type="text" placeholder="Search Location" required="">
    <input type="button" name="Search" value="Search">
  </form>
</li>

CSS：

nav {
  margin: 0 0 0 0;
  font-family: Arial;
  font-size: 100%;
  width: 100%;
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  text-align: center;
  vertical-align: top;
  margin-top: 130px;
}

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  position: sticky;
  top: -130px;
}

#nav li {
  float: left;
}

#nav a {
  display: block;
  color: white;
  text-align: center;
  width: 200px;
  padding: 10px;
  text-decoration: none;
}

li a:hover {
  background-color: black;
}

form {
  display: inline;
  background-color: #000;
  overflow: auto;
  padding: 0;
}

Answer 1

Google地图可以从GET等https://maps.google.com?q=myquery参数中获取输入，因此：

<form method="GET" action="https://maps.google.com">
  <input type="text" placeholder="Search Location" name="q">
  <input type="submit" value="Search">
</form>

在导航栏中创建搜索框

1 个答案: