Question

如何在页面中心的一行中一起创建水平导航栏和搜索框？我使用文本对齐中心将导航栏放在页面的中心，但是当我使用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

这应该适合您，请注意使用内联块来显示列表项和表单的显示属性。还将文本对齐中心放在外部div上。现在将在屏幕中心呈现搜索的导航项目。

还删除了无序列表（ul）左侧的继承填充，使其看起来略偏心。

编辑：回答OP的评论。我将.formright更改为右浮动，使容器div＃navbar 100％宽度，ul.nav边距为0

＆＃13;

xterm-256color

＆＃13;

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%;
}

＆＃13;

Answer 2

这实际上取决于你的目标。我建议调查flexbox我用它制作了一个传统的导航栏

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #CCC;
  margin: 0px;
}
nav {
  list-style: none;
  background: tomato;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex;
  align-items: center;
  
}
nav a {
  text-decoration: none;
  display: block;
  padding: 10px 1em;
  color: white;
}
nav a:hover {
  background: rgba(0,0,0,0.1);
}
nav .spacer {
  flex-grow: 1;
}
nav .formright {
  padding: 10px;
}
@media (max-width: 800px) {
  nav .formright {
    display: none;
  }
}

<div id="title">
  <h1>Welcome to KDU MUSIC CENTER</h1>
</div>

<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>

  <div class="spacer"></div>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

<p>Some text</p>

您可能需要打开全屏才能看到搜索栏。

导航栏和搜索框内联

2 个答案: