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

将#footer { white-space: nowrap }添加到您的css for footer。您还可以添加min-width:###px，其中###足够大。

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

在第二种情况下，我知道它有效，但有点不那么优雅，会强制引擎保持布局框不小于特定数量 - 如果你选择一个包含文本的数量，它可能添加滚动条（可以使用overflow属性控制）但不会导致文本换行。

Answer 2

为了使菜单可以动态添加到菜单中，您应该使容器宽度（＃footer-pages）成为一个相当宽的div，并使内容居中。我通过检查员使用了以下代码：

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

当窗口大小改变时，垂直列表会变得不合适

2 个答案: