0

我是css的新手并且卡住了，无法弄清楚我做错了什么。但我想让脚显示为三列。如果您查看图像布局并注意到页脚有三列，这就是我想要实现的。页脚虚线也显示在布局之外。

这是我的布局： http: //gdisinc.com/barker/images/menubar/layout_barker.jpg

这是工作网站：http ://www.gdisinc.com/barker/default.php#

你能告诉我我必须做些什么来修复它。如果您有任何问题，请告诉我？

4

4 回答 4

1

2个解决方案

增加内容的宽度

.content {
  width: 903px; 
}

或删除内容中最后一个 ul 的边框

.content ul:last-child {
  border-right: 0;
}
于 2012-08-23T07:56:44.713 回答
1

添加这个CSS

.content {
    padding:20px 0;
}

#footer ul {
  margin: 0 0 0 20px;
  width: 275px;
  height:120px;
}

还要添加一个类到最后ul并添加这个

.last {
   border:none;
}

最好按照 Emrah 的建议执行此操作

.content ul:last-child {
  border-right: 0;
}
于 2012-08-23T08:00:59.520 回答
1

第三个<ul>下降的原因是因为您有额外的 1px 边框 ( border-right: 1px dotted #FFFFFF;)。

你这样做的方式是拥有一个 900px 的容器并将其分成 3 列。这是正确的。但是一旦你添加了 extra border-right: 1px dotted #FFFFFF;，列宽就会变成 301px （300px 宽度 + 1px 边框 = 301px）。

要解决这个问题，要么将容器大小更改为 903px。或者您将宽度尺寸减小到 299 像素。

关于另一个问题

页脚虚线显示过去的布局。

小心padding。当您在 div 中添加填充时。它被视为额外宽度。

您的 CSS 的某些部分<ul>是：

    width:902px;
    padding:20px;

总宽度是902px (width) + 20px (left padding) + 20px (right padding) = **942px**

要解决这个问题，您padding可以<ul>使用padding:20px 0px;. 第一个值表示顶部和底部填充，第二个值表示左右填充。

于 2012-08-23T08:08:00.113 回答
0

您的列在父级中不够合适。设置style="border:none;"为最后一列。

于 2012-08-23T07:57:49.330 回答