1

.search-formテキスト入力フィールドが拡張され、 内の利用可能な水平スペースの残りを占めるメニューを作成しようとしています.container。.cart、.logo、およびもあり、.menuその内容に基づいて幅があります。

.search-btn現在、が別の行に.search-formあり、これを修正する方法がわからないことを除いて、すべてを機能させることができます。可能性のある検索結果を含むドロップダウンを作成するため、 と が同じ div に含まれている.search-btnことが重要です。.search-formこのドロップダウンは、 と と同じ幅である必要が.search-btnあり.search-formます。

jsFiddle: http://jsfiddle.net/bnJPE/1/

html:

<div class="container">

    <a href="#" class="cart">
        <img src="http://www.placehold.it/27x27">
    </a>

    <a href="#" class="logo">
        <img src="http://www.placehold.it/100x27">
    </a>

    <ul class="menu">
        <li class="item"><a class="link" href="#">
            Item 01
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 02
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 03
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 04
        </a> </li>
    </ul>

    <div class="search">
        <input class="search-form" type="text" value="varying width">
        <a href="search-btn"><img class="search-icon" src="http://www.placehold.it/20x20"></a>
        <div class="suggestions">
            Potential Results Goes Here
        </div>
    </div>

</div>

CSS:

.container{
    width: 100%;
    float:left;
    height:30px;
    background: yellow;
    padding: 0;
    margin: 0;
}

.logo{
    float:left;
}

.search{
    overflow: hidden;
    background:aqua;
}

    .search > .search-form {
        width: 100%;
    }

    .search > .search-btn {
        width: 27px;        
    }

    .suggestions {
        background: #98faf9;
        height: 50px;
    }

.menu {
    float: left;
}

    .menu > .item {
        display: inline;
        list-style-type: none;
    }

.cart{
    float:right;
}
4

3 に答える 3

1

試す

.search > .search-form {
    width: auto;
}

それ以外の

.search > .search-form {
    width: 100%;
}
于 2013-01-23T22:38:54.933 に答える
1

については、不要なので.search削除し、 を使用してください。を削除すると、ボタンが右に移動できなくなります。または、のイニシャルに設定します。overflow: hiddenfloat: right.search-formwidth: 100%auto 

.search {
    background:aqua;
    float: right;
}

.search > .search-form {
}

変更された JSFiddle

于 2013-01-23T23:02:19.123 に答える
0

さらに.search_white-space: nowrap;

http://jsfiddle.net/WTsqK/

于 2013-01-23T22:44:21.130 に答える