縮小水平列表

Question

我需要使用類似於apple.com上主導航菜單的css創建效果。

我將在左側列出一個列表，並在右側顯示一個搜索框 - 單擊搜索框時，列表將縮小，同時文本框展開。

與我的列表不同的是，項目將左對齊，而不是居中+每個的右邊應該有均勻的邊距/填充。

蘋果正在使用的表格樣式佈局，這將無法正常工作。

有關如何實現此目的的其他想法？

這是我在哪裏達：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

蘋果網站使用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>