0

ヘッダーの 2 つの要素、ピンクのセクションと緑のセクションをインラインにしようとしています (現在、緑のセクションのように 1 行で、新しい行に折り返されていません)。

ただし、display:inline; は使用できません。アイテムには幅が必要です。

これらの要素の両方をインラインにし、幅を維持するにはどうすればよいですか?

要素があるページは次のとおりです: https://dl.dropboxusercontent.com/u/270523/help/new.html

4

4 に答える 4

1

インライン ブロック ソリューション:

#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>
于 2013-04-20T05:31:01.437 に答える
0

余分な幅があるため、セクションの入力が低下しています。約77％にすると、うまくいきます。

#input{width:77%;}
于 2013-04-20T05:13:40.027 に答える
0

float を #input セクションに設定しましたが、#logo セクションには設定しませんでした。

#logo {
width:20%;
float: left;
}
于 2013-04-20T05:15:39.973 に答える
0

まず第一に、HTML5タグを使用するのは本当にいいことです。あなたにとって良いことです。私の意見では、ヘッダー内のすべての要素にフロートを使用するのが最も簡単な方法ですが、必ずclear:both親タグを付けてください。

コードを変更したデモは次のとおりです。http://jsfiddle.net/bartekbielawa/WgtAP/

于 2013-04-20T06:46:49.873 に答える