css - 如何制作宽度灵活的？

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;
}

小提琴

Answer 2

您希望搜索输入的宽度更小，但您在 css 中编写：

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

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

演示

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