Question

我尝试使用float使导航栏水平排列，搜索栏也会放在导航栏旁边。

但结果是导航栏不再放置文本对齐中心。

＆＃13;

body {
  background-color: #C0C0C0;
  margin: 0px;
}
#title {
  text-align: center;
  margin: 0;
  font-size: 40px;
  text-decoration: underline;
}
#wrapper {
  margin: 3% 5%;
  background-color: #FFF5EE;
  min-width: 300px;
  position: relative;
}
#navbar {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  display: block;
  background-color: #4B0082;
}
.nav li {
  list-style-type: none;
  display: inline-block;
  padding: 30px;
  background-color: red;
}
.nav li a {
  color: white;
}

＆＃13;

<DOCTYPE html>
  <html lang="en">

  <head>
    <link rel="stylesheet" type="text/css" href="test1.css">
    <title>KDU Music</title>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="title">
      <p>
        <h1>Welcome to KDU MUSIC CENTER</h1>
      </p>
    </div>
    <div id="wrapper">
      <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 id="content">
        <p>asdasdas</p>
      </div>
    </div>
  </body>

  </html>

＆＃13;

如何将搜索栏放在导航栏旁边？

Answer 1

通过添加绝对位置，您将强制元素始终位于右上角：

.formright {
  position: absolute;
  right: 50px;
  top: 80px
}

在这里你可以看到它的实际效果： http://codepen.io/1GR3/pen/WGkwzo

对于较小的屏幕尺寸，您需要创建媒体查询，这将以其他方式重新排列。

请注意这是一个快速修复！要以正确的方式执行，请使用某种网格系统并将元素放入列中。在左侧，您可以使用空列或偏移。

Answer 2

http://codepen.io/Navedkhan012/pen/wzAGRo

＆＃13;

body {
  background-color: #C0C0C0;
  margin: 0px;
}
#title {
  text-align: center;
  margin: 0;
  font-size: 40px;
  text-decoration: underline;
}
#wrapper {
  margin: 3% 5%;
  background-color: #FFF5EE;
  min-width: 300px;
  position: relative;
}
#navbar {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  display: block;
  background-color: #4B0082;
}
.nav li {
  list-style-type: none;
  display: inline-block;
  padding: 10px;
  background-color: red;
}
.nav li a {
  color: white;
}

＆＃13;

<div id="title">
      <p>
        <h1>Welcome to KDU MUSIC CENTER</h1>
      </p>
    </div>
    <div id="wrapper">
      <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>
          
          <li>
        <form class="formright">
          <input type="text" placeholder="Search">
          <button type="submit">Search</button>
        </form></li>
        </ul>
        
      </div>
      <div id="content">
        <p>asdasdas</p>
      </div>
    </div>
  </body>

＆＃13;

如何移动导航栏旁边的搜索栏

2 个答案: