Question

我的菜单有问题，其中有搜索表单。当输入处于焦点时，菜单的元素必须具有较小的宽度，但我不知道如何使其工作......

    <nav role="navigation" class="holder">
    <ul id="navigation">
        <li><a href="#" id="home">Home</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li id="search">
            <form method="get" action="">
                <input type="text" name="string">
                <input type="submit" name="" value="Go">
                <div class="c_l"></div>
            </form>
        <li>
    </ul>
</nav>

以下是代码，您可以在其中查看我正在尝试做什么：http://jsfiddle.net/YcLtw/

Answer 1

如果您的搜索框在没有足够的宽度展开时向下移动，那么您可以通过执行以下操作来解决此问题：

#navigation {
   position: relative;
}
#search {
   position: absolute;
   right: 0;
}

FIDDLE

Answer 2

您希望搜索输入的宽度较小，但您可以在css中写下：

#navigation > #search input[type=text]:focus{width:150px;}

如果在输入聚焦时仍希望宽度增加，请将宽度设置得更小。

Demo

我为输入添加了边框。顺便说一下，border:0;应更正为border:none;

如何使<li>灵活的宽度？</li>

2 个答案: