html - 导航栏和搜索框内联

Question

如何在页面中心的一行中同时创建水平导航栏和搜索框？ 我使用 text-align center 将导航栏放在页面的中心，但是当我使用 float 将搜索框放置在 nav 旁边时，整个导航栏向左浮动。

body {
  background-color: #C0C0C0;
  margin: 0px;
}
.nav {
  text-align: center;
  list-style: none;
}
.nav li {
  display: inline;
  float: left;
}

<div id="title">
  <p>
    <h1>Welcome to KDU MUSIC CENTER</h1>
  </p>
</div>

<div>
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="findoutmore.php">Find out more</a></li>
    <li><a href="offer.html">Offer</a></li>
    <li><a href="credit.html">Credit</a></li>
    <li><a href="#">Admin</a></li>
    <li><a href="wireframe.html">WireFrame</a></li>
  </ul>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
  some text
</div>

Answer 1

这应该对您有用，请注意使用 inline-block 来显示列表项和表单的属性。还将文本对齐中心放置在外部 div 上。现在将在屏幕中央呈现带有搜索的导航项。

还删除了无序列表 (ul) 左侧的继承填充，这使其看起来稍微偏离中心。

编辑:回答OP的评论。 我将 .formright 更改为向右浮动，使容器 div#navbar 宽度为 100%，并将 ul.nav 边距设置为 0

body {
  background-color: #C0C0C0;
  margin: 0px;
}
.nav {
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav {
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
}

.formright {
   display:inline-block;
   float:right;
}

#navbar {
  text-align: center;
  width: 100%;
}

<div id="title">
  <p>
    <h1>Welcome to KDU MUSIC CENTER</h1>
  </p>
</div>

<div id="navbar">
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="findoutmore.php">Find out more</a></li>
    <li><a href="offer.html">Offer</a></li>
    <li><a href="credit.html">Credit</a></li>
    <li><a href="#">Admin</a></li>
    <li><a href="wireframe.html">WireFrame</a></li>
  </ul>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</div>
<div>
  some text
</div>