CSSの表示インラインと

Question

を働いていないフロート、私は次のように非常にシンプルなレイアウトを持っている：Inline search and logout button

あなたは私がこれらのインライン表示に問題が見ることができるように。ここでのコードは次のとおりです。

HTML：

<div class="nav-bar"> 
<div class="search"> 
    <form action="" method="post"> 
     <input type="search" placeholder="Search here..." required> 
     <input type="submit" value="Search"> 
    </form> 
</div> 
<div class="logout"> 
    <a href="logout.php" class="button-small">Logout</a> 
</div> 
</div> 

CSS：

.nav-bar 
{ 
display: inline-block; 
background: #607D8B; 
padding: 5px; 
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
width: 100%; 
height:27px; 
} 

.search { 
background-color: chartreuse; 
width: 250px; 
margin: 0 auto; 
} 

.logout { 
display: inline-block; 
float: right; 
font-family:'Roboto',sans-serif; 
} 

.logout, 
.username 
{ 
background-color: chartreuse; 
margin: 0; 
padding: 0; 
list-style: none; 
} 

.logout a, 
.header-heading a 
{ 
/*display: block;*/ 
padding: .7em 1em; 
color: #607D8B; 
text-decoration:none; 
/*border-bottom: 1px solid gray;*/ 
font-family:'Roboto',sans-serif; 
} 

.logout a:link { color: #607D8B; } 

.logout a:visited { color: #607D8B; } 

.logout a:focus 
{ 
color: #607D8B; 
font-weight:bolder; 
} 

.logout a:hover 
{ 
color: #607D8B; 
font-weight:bolder; 
} 

.logout a:active 
{ 
color: #607D8B; 
} 

I`veは、私ができるすべてを試みたが、添付画像に示すように、何らかの理由でそれ自体がまだ表示されています。

Answer 1

あなたはdisplay: inline-blockそれがインラインブロックが水平方向に、他のインラインまたはインラインブロック要素の位置に合わせます作る .searchを追加するを忘れとしてそれは揃っていません。

また、margin: 0 auto;も必要ありません。それを配置するには、他の手法を使用します。

私はあなたのコードhere

UPDATEとフィドルを作成しました

.nav-bardisplay: inline-block性質を持つべきではありません。 検索フォームとボタン用の全角コンテナになるためには、ブロックにしておく必要があります。

あなたは私はあなたがしようとしていると仮定していposition: absolute;

.logout { 
    position: absolute; 
    right: 0; 
    top: 5px; //As padding-top of .nav-bar 
    ... 
} 

Updated fiddle

Answer 2

を使用し、右上に位置ログアウトボタンに.search

をセンタリングするため、以前のソリューションに固執することができますヘッダーのすべてを整列させるには、.logout DIVの絶対位置を使用してみてください。例えばhere .. 'logout'ボタンを画面キャプチャのようにヘッダの下部に配置したい場合は、 'top'の位置の値を増やしてください。