4

に入力フィールドを作成しましたdiv

高さは自動ですが、div残念ながらsearchbar_home div、入力ボックスと送信ボタンを囲むように高さが増加していません。

これが私のHTMLです

  <div id='container'>    
    <div id="content">
        <h1 class="home_title">English to Malayalam</h1>
        <div id="searchbar_home">
            <input type="text" />
            <input type="submit" />
        </div>
    </div>
    <footer>
        <p>Copy right only for me ;)</p>
    </footer>

  </div>​

私のCSS：

#searchbar_home{
    margin: 0 auto 20px;
    padding: 10px;
    height: auto;
    width: 80%;
    background: #F5F5F5;
    border: 1px solid #D8D8D8;

    border-radius: 6px;
}
#searchbar_home:after{
    clear: both;
}
#searchbar_home input[type="text"]{
    height: 35px;
    float: left;
    width: 90%;
    border: 1px solid #CCCCCC;
    border-right: none;

    border-radius: 6px 0 0 6px;
}
#searchbar_home input[type="submit"]{
    float: left;
    background: #414141;
    height: 40px;
    width: 50px;
}​

これがjsfiddleのデモです。

こちらの画像デモ

`searchbar_home``div'のサイズを大きくするにはどうすればよいですか？

4

2 に答える 2

16

私はあなたがあなたを浮かせたと思いますinput。divそれに合うサイズを作成するには、そのoverflow:auto;スタイルにルールを追加します。

于 2012-09-08T23:36:39.897 に答える
3

フロートをクリアするために :after トリックを使用しようとしましたか?

あなたのコードから：

    #searchbar_home:after{
         clear: both;
    }

実際にコンテンツを提供し、インラインではなくブロックアイテムにする必要があります-

    #searchbar_home:after{
         content:'';
         display:block;
         clear: both;
    }

動作するはずです。

于 2012-09-08T23:56:06.393 に答える