Question

我已经查看了各种网站，包括这个答案，但未找到答案。我正在尝试将用户输入文本框添加到我已设置的导航栏中，它正在填充剩余的空间，没有留下搜索按钮的空间并将其强制到下一行。

＆＃13;

    #nav {
      background-color: #222;
      position: fixed;
      width: 100%;
      top: 0px;
    }
    #nav-wrapper {
      width: 90%;
      margin: 0px auto;
      text-align: left;
    }
    #nav ul {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
    }
    #nav ul li {
      display: inline-block;
    }
    #nav ul li:hover {
      background-color: #333;
    }
    #nav ul li a,
    visited {
      display: block;
      padding: 15px;
      color: #CCC;
      text-decoration: none;
    }

＆＃13;

<div id="nav">
  <div id="nav-wrapper">
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="history.php">History</a>
      </li>
      <li><a href="basket.php">Basket</a>
      </li>
      <li><a href="contact_us.php">Contact Us</a>
      </li>
      <li><a href="javascript:void(0)" onclick="toggle_visibility('login')">Login</a>
      </li>
      <li><a href="javascript:void(0)" onclick="toggle_visibility('register')">Register</a>
      </li>
      <input id="search-bar" name="search" type="text" placeholder="Search...">
      <input id="search-button" name="search_submit" type="submit" value="Search!">
    </ul>
  </div>
</div>

＆＃13;

请帮助我解决这个问题，因为它真的让我烦恼，我一直在努力寻找解决方案2小时。谢谢！

Answer 1

你能否明确指定文本框的宽度？

#search-bar {
    width: 10em;
}

Answer 2

您需要做的是将输入ID作为列表项，并且全部完成。

带搜索栏的html导航栏

2 个答案: