如何显示搜索栏＆＃39; inline＆＃39;与其他元素

Question

我正在尝试创建一个带有页面链接的导航栏，但是搜索＆＃39; bar不会与其他列表元素水平转移：

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。块级元素不允许其他元素位于其水平空间。

form {
  display: inline-block;
}

Answer 2

将表单display设置为inline。由于默认情况下它是块级元素，因此它在整个可用宽度内占用自己的空间。

＆＃13;

＆＃13;

nav {
  height: 100px;
  width: 100%;
}
li {
  display: inline;
  list-style: none;
}
form {
  display: inline;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这里有一些例子：

基本

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

li, li > form {
  display:inline; 
  list-style:none;
}

除了最后一项

之外的10px保证金

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

li, li > form {
  display:inline; 
  list-style:none;
  margin-right: 10px;
}

li:last-child > form{
  margin-right: 0px;
}

右侧左侧搜索栏上的链接

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

li, li > form {
  display:inline; 
  list-style:none;
  margin-right: 10px;
}

li:last-child > form{
  margin-right: 0px;
}

li:last-child{
  float:right;
}

LEFT 中右侧搜索栏上的

链接

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

li, li > form {
  display:inline; 
  list-style:none;
  margin-right: 10px;
}

li:last-child > form{
  margin-right: 0px;
}

li:nth-child(n){
  float:right;
}
li:last-child{
  float:left;
}