设置三列页脚的样式有问题(divs footer tag?)
设置三列页脚的样式有问题(divs footer tag?)
提问于 2013-01-24 00:40:39
我想在我的网站底部设计一个三栏的“胖页脚”。我能够正确地设置一般的页脚标签(整个页脚的背景颜色、大小和位置)，但我在理解如何正确设置其中三列的样式时遇到了一些麻烦。这是我的标记：
<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？)。
任何帮助都将不胜感激！谢谢。
回答 5
Stack Overflow用户
发布于 2013-01-24 00:46:59
<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 */
}Stack Overflow用户
发布于 2013-01-24 00:44:56
这应该是可行的。
.column1 {
// Do styling here for column one
}
.column2 {
// Do styling here for column two
}
.column3 {
// Do styling here for column three
}Stack Overflow用户
发布于 2013-01-24 00:46:02
这有帮助吗？它将每一列(footer ul)的样式设置为33%的宽度，以便它们在100%宽度的页脚上均匀分布：
http://jsfiddle.net/CPju5/
您也可以像Ryan所说的那样，分别设置每一列的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14484757
复制相关文章
相似问题
腾讯云开发者
