2

WordPress テーマのヘッダー部分を変更していて、別の div 内にいくつかの div をネストしようとしています。私は HTML/CSS の経験があまりありませんが、私が観察していることは奇妙に思えます。

私のコードは次のようになります。

<div class="extras">
    <div id="search"> 
        <form role="search" method="get" id="searchform" action="http://mentatescholars.com/" >
            <input type="search" placeholder="Search" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
    </div><!-- end #search -->
    <div class="phone-number">
        <div class="phone-number-main">1-885-MENTATE</div>
        <div class="phone-number-sub">1-885-636-8283</div>
    </div>
</div>

そして、写真では、phone-numberFirefoxのインスペクターでdivを選択しています（選択extrasは同じように見えます）。私が奇妙に感じるのは、 extrasdiv の後ではなく、divの先頭から開始する理由searchです。search高さが40pxに設定されています。

私の検索ボックスと電話番号

3 番目の div を選択すると、前の div の直後から始まる div が表示されます。

3番目のdivを選択すると、私が思うように動作します
また、奇妙に感じるのphone-number-mainは、divの上部が と同じ高さであるのにextras、何もしなくてもテキストが完全に下に移動する方法です。

phone-number私の質問はこれです: divがdivの直後に開始するようにするにはどうすればよいsearchですか?

ご覧になりたい場合は、こちらのサイトをご覧ください: http://mentatescholars.com/ .

4

3 に答える 3

2

#search浮いて.phone-numberいない。に追加clear:bothすると.phone-number <div />、正しいレイアウトが表示されます。

floatドキュメントの流れから要素を削除します。詳細については、このリンクを確認してください: http://www.alistapart.com/articles/css-floats-101/

于 2013-01-07T08:29:26.193 に答える
1

これは、浮動要素があるためです。あなたの「検索」divは浮かんでいて、明確ではありません。clear:bothphone-number 要素の CSS で使用すると、正常に動作します

また、数値をすぐ後にしたい場合はsearch、高さをsearch30px にして、送信ボタンの余白の下部を取り除きます。

于 2013-01-07T08:34:18.947 に答える
0

高さを減らして #search ブロックを小さくします。たとえば、30px にします。

于 2013-01-07T08:26:42.697 に答える