Question

我正在尝试创建一个菜单，其中文本输入字段.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;
}

Answer 1

尝试

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

而不是

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

Answer 2

对于.search，请删除overflow: hidden，因为不需要，并使用float: right。对于.search-form删除width: 100%，因为这会阻止按钮向右移动，或将其设置为auto的首字母

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

.search > .search-form {
}

Modified JSFiddle

Answer 3

在.search添加white-space: nowrap;

http://jsfiddle.net/WTsqK/

文本字段填补其余的水平空间

3 个答案: