CSS页脚列无法正确显示

Question

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

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

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

你能告诉我我要做些什么来解决它。如果您有任何疑问，请告诉我？

Answer 1

2个解决方案

增加内容的宽度

.content {
  width: 903px; 
}

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

.content ul:last-child {
  border-right: 0;
}

Answer 2

添加此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;
}

Answer 3

第三个<ul>失败的原因是因为你有一个额外的1px边框（border-right: 1px dotted #FFFFFF;）。

你这样做的方法是拥有一个900px的容器并将其分成3列。那是对的。 但是，一旦您添加了额外的border-right: 1px dotted #FFFFFF;，列宽就会变为301px（300px宽度+ 1px border = 301px ）。

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

---

关于

的另一个问题

  

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

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

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

    width:902px;
    padding:20px;

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

要解决此问题，请使用padding更改<ul>的{​​{1}}。 第一个值代表top＆amp;底部填充，第二值代表左和右正确填充。

Answer 4

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