html - 缩小水平列表

Question

我需要使用 css 创建类似于 apple.com 上的主导航菜单的效果。

我将在左侧有一个列表，在右侧有一个搜索框 - 单击搜索框时，列表会缩小，而文本框会展开。

与我的列表不同的是，元素将左对齐而不是居中 + 每个元素的右侧应该有均匀的边距/填充。

Apple 使用的表格样式布局不适用于此。

关于如何实现这一目标还有其他想法吗？

这是我的工作:http://jsfiddle.net/h8gCd/6/

<div>
    <ul>
        <li><a href="#"><span>Link 1</span></a></li>
        <li><a href="#"><span>Link 2</span></a></li>
        <li><a href="#"><span>Link 3</span></a></li>
        <li><a href="#"><span>Link 4</span></a></li>
        <li class="last"><a href="#"><span>Link 5</span></a></li>
    </ul>
    <form>
        <input type="text" />
    </form>
</div>


div {
    width: 100%;
    background: #e1e1e1;
    float: left;
    padding: 10px 0;
    width: 820px;
}

ul {
    float: left;
    width: 600px;
    padding: 0;
    margin: 0;
    background: red;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000
}
a:hover {
    color: #444
}

li {
    list-style-type: none;
    float: left;
    margin-right: 77px;
}

li.last {
    margin-right: 0;
}

form {
    float: right;
    width: 200px;
    background: green;
}

input {
    width: 194px;
    transition: all 0.2s ease-in-out;
}

input:focus {
    width: 250px;
}

Answer 1

Apple 网站使用 display: table 和 display: table-cell 来实现这个效果:

http://jsfiddle.net/h8gCd/7/

div {
    width: 100%;
    background: #e1e1e1;
    float: left;
    padding: 10px 0;
    width: 820px;
}
ul {
    display: table;
    width: 600px;
    padding: 0;
    margin: 0;
    background: red;
}
a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000
}
a:hover {
    color: #444
}
li {
    display: table-cell;
    margin-right: 77px;
    width: 20%;
}
li.last {
    margin-right: 0;
}
form {
    background: green;
}
input {
    width: 194px;
    transition: all 0.2s ease-in-out;
}
input:focus {
    width: 250px;
}

<div>
    <ul>
        <li><a href="#"><span>Link 1</span></a>
        </li>
        <li><a href="#"><span>Link 2</span></a>
        </li>
        <li><a href="#"><span>Link 3</span></a>
        </li>
        <li><a href="#"><span>Link 4</span></a>
        </li>
        <li class="last"><a href="#"><span>Link 5</span></a>
        </li>
        <li>
            <form>
                <input type="text" />
            </form>
        </li>
    </ul>
</div>