0

我想在我的网站底部设计一个三栏的“胖页脚”。我能够正确设置一般页脚标签（整个页脚的背景颜色、大小和位置），但我在理解如何正确设置其中的三列样式时遇到了一些麻烦。这是我的标记：

<footer>

        <li class="column1">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            <li><a href="#">Sizing Chart</a></li>
            <li><a href="#">Returns & Exchanges</a></li>
            <li><a href="#">Shipping Information</a></li>
        </li>

        <ul class="column2">
            <li>###-###-####</li>
            <li>email</li>
        </ul>

        <ul class="column3">
            <div class="fb-like" data-href="fb page" data-send="true" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Tumblr</a></li>
        </ul>
</footer>

这是我的CSS：

footer {
letter-spacing: 0.2px;
margin-top: 20px;
margin-bottom:30px;
margin-left: -10%;
margin-right: auto;
background: #000;
color: #fff;
position: absolute;
width: 112.1%;

}

a:link,
a:visited {
color:#fff;
 text-decoration: none;
}
a:hover {
color: #999;

}

.column1 {
float: left;
position: absolute; 
max-width: 950px;
}

最后一个“.column1”集只是为了向您展示我一直在想我应该如何设置列的样式。我的主要问题是弄清楚如何设置这部分（是 ul.column1、#column1、.column1 吗？？？）。

任何帮助将非常感激！谢谢。

4

5 回答 5

1 
<footer>

        <ul class="column column1">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            <li><a href="#">Sizing Chart</a></li>
            <li><a href="#">Returns & Exchanges</a></li>
            <li><a href="#">Shipping Information</a></li>
        </ul>

        <ul class="column column2">
            <li>###-###-####</li>
            <li>email</li>
        </ul>

        <ul class="column column3">
            <div class="fb-like" data-href="fb page" data-send="true" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Tumblr</a></li>
        </ul>
</footer>

CSS

.column { 
    float: left;
    margin: 0;
    padding: 0;
    width: 33.333%;
}

.column1 {
   /* specific styles for column 1 */
}

.column2 {
   /* specific styles for column 2 */
}

.column3 {
   /* specific styles for column 3 */
}
于 2013-01-23T16:46:58.563 回答
0

这应该有效。

.column1 {
 // Do styling here for column one
}

.column2 {
 // Do styling here for column two
}

.column3 {
 // Do styling here for column three
}
于 2013-01-23T16:44:56.073 回答
0

这有帮助吗？它将每列 ( ) 的样式footer ul设置为具有 33% 的宽度，因此它们在 100% 宽度的页脚中均匀分布：

http://jsfiddle.net/CPju5/

您也可以像 Ryan 所说的那样单独设置每一列的样式。

于 2013-01-23T16:46:01.783 回答
0

你把 LI 给column1而不是 UL。写这个：

<ul class="column1">
            <li><a href="#">Contact</a></li>
            ....
</ul>

而不是这个：

<li class="column1">
                <li><a href="#">Contact</a></li>
                ....
</li>
于 2013-01-23T16:46:36.217 回答
0

该footer元素应overflow:auto在其 css 中。

列可以是position: relative.

于 2013-01-23T16:47:00.117 回答