0

我很难解释这个问题，所以让我给你网址。

访问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;
}
4

2 回答 2

0

添加#footer { white-space: nowrap }到您的 CSS 作为页脚。您还可以添加min-width:###px### 足够大的位置。

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

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

于 2013-04-23T03:14:54.457 回答
0

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

#footer-pages {
  width: 100%;
  text-align: center;
  min-width: 500px;
}
于 2013-04-23T03:18:23.230 回答