html - 如何用其他元素显示搜索栏 'inline'

Question

我正在尝试创建一个带有页面链接的导航栏，但“搜索”栏没有与其他列表元素水平排列:

HTML

<header class="nav">
  <ul class="main">
    <li><a href="page1">page1</a></li>
    <li><a href="page2">page2</a></li>
    <li><a href="page3">page3</a></li>
    <li> 
      <form>
        <input type="text" placeholder="Search..." required>
        <a href="#" class="button" id="searchbut">Search</a>
      </form> 
    </li>
  </ul>
</header>

CSS

nav {
  height:100px;
  width:100%;
}

li {
  display:inline; 
  list-style:none;
}

Answer 1

在 CSS 中将表单的 display 设置为 inline-block。 block 级元素不允许其他元素出现在它们的水平空间上。

form {
  display: inline-block;
}