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

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

    <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/

最佳答案

如果您的意思是当搜索框没有足够的宽度扩展时会向下移动，则可以通过以下操作来解决此问题：

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

FIDDLE

关于css - 如何使<li>的宽度灵活？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23584516/