ナビゲーションバーの横にある検索バーを移動する方法

私は、floatを使用して、ナビゲーションバーを水平に並べるようにしました。また、検索バーはナビゲーションバーの横に配置されます。
ナビゲーションバーの横にある検索バーを移動する方法

しかし、その結果、ナビゲーションバーはテキストの配置中心に配置されなくなりました。私はちょうど右のナビゲーションバーの横に検索バーを配置することができますどのように

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

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

？

出典

2016-10-01 Chi Shen

apsolute位置を追加することによって、あなたは常に、右上隅にあるように要素を強制します：

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

をそしてここで、あなたはアクションでそれを見ることができます。 http://codepen.io/1GR3/pen/WGkwzo

小さい画面サイズの場合は、逆に並べ替えるメディアクエリを作成する必要があります。

これはすばやい修正です。適切なやり方をするには、何らかのグリッドシステムを使用して要素を列に入れます。左側では、空の列またはオフセットを使用できます。

出典

2016-10-01 07:08:05 1GR3

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

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

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

出典

2016-10-01 07:40:56

ナビゲーションバーの横にある検索バーを移動する方法

答えて

関連する問題