當窗口大小發生變化時，垂直列表出現問題

Question

這對我來說很難解釋，所以讓我給你一個URL。

訪問http://www.ucaftercruz.com

如果你看一下頁腳，那裏有垂直排列的無序列表。拖動瀏覽器並將其縮小時，列表將從一行變爲兩行。我該如何使它保持在一行和頁腳的中間位置，而不管窗口大小如何？

我懷疑它與我的div有什麼關係。

這裏是我的html代碼：

<div style="clear:both;"> 
    <div id="footer"> 
    <div id="footer-pages"> 
     <ul> 
      <li><a href="http://www.ucaftercruz.com/about/">About the blog</a></li><span>&#149;</span> 
      <li><a href="http://www.ucaftercruz.com/blographies/">The Authors</a></li><span>&#149;</span> 
      <li><a href="#">Archives</a></li><span>&#149;</span> 
      <li><a href="http://www.ucaftercruz.com/credits/">Credits</a></li><span>&#149;</span> 
      <li><a href="http://www.ucaftercruz.com/faq/">FAQ</a></li> 
     </ul> 
    </div> 

這裏是我的CSS：

#footer { 
    height: 100px; 
    background-color: #d0cabc; 
    font-size: 12px; 
} 

#footer a { 
    color: #606060; 
} 

#footer-pages { 
    padding: 20px 0; 
    border: 0px solid green; 
    margin: 0 auto; 
    width: 35%; 
} 

#footer li { 
    display: inline-block; 
    margin: 0 15px; 
} 

Answer 1

爲了使菜單可以動態添加到，您應該將容器寬度（＃頁腳頁面）設置爲相當寬的div，然後居中放置內容。我通過檢查員使用了以下代碼：

#footer-pages { 
    width: 100%; 
    text-align: center; 
    min-width: 500px; 
} 

Answer 2

添加#footer { white-space: nowrap }到你的CSS的頁腳。您還可以在###足夠大的地方添加min-width:###px。

在第一種情況下，您告訴渲染引擎避免使該框比包含文本所需的最小值小。實際上我不確定這是否適用於這種列表。

在我知道的第二種情況下，雖然稍微不太優雅，但會強制引擎保持佈局框不小於特定的數量 - 如果您選擇一個包含文本的數量，它可能會添加滾動條（您可以使用overflow屬性來控制），但不會導致文本換行。