ナビゲーションバーと検索ボックスのインライン

Question

ページの中央に水平ナビゲーションバーと検索ボックスを1行で作成するにはどうすればよいですか？ 私は、ページの中央にナビゲーションバーを置くためにテキストアライメントセンターを使用していますが、私がフロートを使用してnavの横に検索ボックスを置くと、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を変更「これは本当にあなたが見てのどのような種類に依存して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>

Answer 2

にコンテナのdiv＃のナビゲーションバーが100％の幅とul.navマージンを作りましたもう一度行く。私は、あなたが検索バーを調べるために、全画面を開く必要があり、それを

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>

を使用して、伝統的なルッキングナビゲーションバーを作ったflexboxに探してお勧めしたいです。