Css 当窗口大小更改时，垂直列表会偏离直线

我很难解释这个问题，所以让我给你一个URL

拜访

如果你看页脚，有一个无序的垂直排列的列表。拖动浏览器并使其变小时，列表从一行变为两行。我如何使它保持在一行，并在页脚的中心，而不管窗口大小

我怀疑这和我的潜水有关

以下是我的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>

将

#footer{white space:nowrap}

添加到您的css for footer。您还可以添加

最小宽度：###px

其中###足够大

在第一种情况下，告诉渲染引擎避免使框小于包含文本所需的最小值。事实上，我不确定这是否适用于此类列表

---

在第二种情况下，我知道它是有效的，但不太优雅，它将强制引擎保持布局框不小于特定数量——如果您选择包含文本的数量，它可能会添加滚动条（您可以使用

overflow

属性控制滚动条）但不要使文本换行。

为了使其能够动态添加菜单，您应该将容器宽度（#页脚页面）设置为相当宽的div，并将内容居中。我通过inspector使用了以下代码：

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

---

看起来最小宽度对我来说很合适。遗憾的是，空白没有起到多大作用：（我不确定每个

LI

是否都是它自己的块。很高兴你让它工作了。

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