1

我正在尝试创建一个菜单，其中文本输入字段.search-form将扩展以占用.container. 我也有一个.cart, .logo, 并且.menu它的宽度基于它们的内容。

目前，我能够让一切正常工作，除了当时.search-btn在不同的线路上.search-form，我不知道如何解决这个问题。重要的是.search-btn和.search-form包含在同一个 div 中，因为我将创建一个包含潜在搜索结果的下拉列表。此下拉列表的宽度必须与.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: hidden不需要，然后使用float: right. 对于.search-form删除width: 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 回答