ヘッダーの 2 つの要素、ピンクのセクションと緑のセクションをインラインにしようとしています (現在、緑のセクションのように 1 行で、新しい行に折り返されていません)。
ただし、display:inline; は使用できません。アイテムには幅が必要です。
これらの要素の両方をインラインにし、幅を維持するにはどうすればよいですか?
要素があるページは次のとおりです: https://dl.dropboxusercontent.com/u/270523/help/new.html
ヘッダーの 2 つの要素、ピンクのセクションと緑のセクションをインラインにしようとしています (現在、緑のセクションのように 1 行で、新しい行に折り返されていません)。
ただし、display:inline; は使用できません。アイテムには幅が必要です。
これらの要素の両方をインラインにし、幅を維持するにはどうすればよいですか?
要素があるページは次のとおりです: https://dl.dropboxusercontent.com/u/270523/help/new.html
インライン ブロック ソリューション:
#logo {
width: [WIDTH1]%;
min-width: 225px;
background: pink;
}
#input{
width: [WIDTH2]%;
background: green;
}
#input,#logo {
display: inline-block;
height: 100%;
vertical-align:top;
}
[WIDTH1] + [WIDTH2] = 100%。これを機能させるには、2 つの要素の間の空白を削除する必要があります。
だから今のようではありません:
<section id="logo"></section>
<section id="input">
<input id="searchInput" type="text" name="search" autocomplete="off">
</section>
代わりに:
<section id="logo"></section><section id="input">
<input id="searchInput" type="text" name="search" autocomplete="off">
</section>
余分な幅があるため、セクションの入力が低下しています。約77%にすると、うまくいきます。
#input{width:77%;}
float を #input セクションに設定しましたが、#logo セクションには設定しませんでした。
#logo {
width:20%;
float: left;
}
まず第一に、HTML5タグを使用するのは本当にいいことです。あなたにとって良いことです。私の意見では、ヘッダー内のすべての要素にフロートを使用するのが最も簡単な方法ですが、必ずclear:both
親タグを付けてください。
コードを変更したデモは次のとおりです。http://jsfiddle.net/bartekbielawa/WgtAP/