Question

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

<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 ???）。

任何帮助将不胜感激！感谢。

Answer 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 */
}

Answer 2

这应该有用。

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

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

.column3 {
 // Do styling here for column three
}

Answer 3

这有帮助吗？它将每列（footer ul）的样式设置为宽度为33％，因此它们在100％宽度页脚上均匀分布：

http://jsfiddle.net/CPju5/

你也可以单独设置每一列的样式，就像Ryan说的那样。

Answer 4

您将LI提供给 column1 而非UL。写下这个：

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

而不是：

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

Answer 5

footer元素的css中应该有overflow:auto。

列可以是position: relative。

设置三列页脚的问题（页脚标签内的div？）

5 个答案: