HTML页脚CSS设置

我已经浪费了太多的精力和时间试图在HTML/CSS中创建这个页脚，我只是不能正确地得到它。我被告知最好的方法是使用

和

，但要使其正确对齐是一个挑战

这就是它应该看起来的样子

这就是我的版本

我尝试做的是以下几点：（CSS在下面）

标题/标题

街道地址
电话


Zipcode/城市
邮件：电子邮件


链接

奥姆斯科伦
加莱里


埃利弗
Foræ；ldre


卡伦德
同性恋者



.footer{background:url（images/footer_bg.png）top repeat-x#e4e2de；宽度：100%；填充：20px 0 30px 0；}
.footer ul{边距：0；填充：0；列表样式：无；}
.footer ul li{显示：内联；左边距：25px；}
.footer_容器{边距：22px 0；}
.footer_容器ul{边距：0；填充：0；颜色：413f3d；宽度：100%；}
.footer_容器ul li{显示：内联块；列表样式：无；边距：0；字体大小：11px；文本对齐：左；垂直对齐：顶部；填充：0；宽度：270px；}
.footer_容器ul li ul{宽度：120px；浮点：左；}
.footer_容器ul li{显示：块；宽度：自动；}
.footer_容器ul.right{float:right；}

我已经插入了3张图片，第二个盒子看起来不太好。 我愿意接受任何建议/建议

---

谢谢

我会把它改大，改为在页脚内使用容器

HTML

标题

阿迪斯
电话
Zipcode/城市
邮件：电子邮件

链接

奥姆斯科伦
埃利弗
卡伦德
加莱里
Foræ；ldre
同性恋者

你的FB/Twitter内容
​

CSS

.footer\u容器{
宽度：960px；
}
.footer\u容器强{
字体大小：粗体；
}
.footer\u容器分区容器{
宽度：320px；
浮动：左；
}
.footer_容器ul{
列表样式：无；
保证金：0；
填充：0；
}
.footer_容器ul li{
宽度：160px；
浮动：左；
}

演示

---

在。

我猜

.footer\u容器

会把上面的东西都包起来吗？如果是，请将其添加到HTML中以供完整参考。此外，您的包装未关闭。还有，什么东西没有正确对齐？如果有的话，我看到了两个列表，但您试图制作一个大列表，这只是使事情变得复杂。我为没有在我的计算机上显示它的外观而道歉。我将提供一张照片，明天当我可以访问我在这个项目中使用的计算机。我忘了添加整个页脚代码。对此我很抱歉，我会在明天修复的。我已经用适当的信息更新了主要帖子。这看起来已经比我拥有的要好得多了。不幸的是，第二个盒子（在中间）"必须有3行，如2 x 2 x 2。如上所述，我很抱歉没有显示我的版本的图片，我将在明天访问PC时提供。我已经相应地更新了小提琴，在容器中添加了

.left

、

.middle

和

.right

类，以便设置不同的在

div.container.middle

的

上的宽度。你应该得到一枚奖章，非常感谢。现在能够使它看起来正确真的很让人沮丧。我肯定从你的例子中学到了一些东西。谢谢你，不客气，我很高兴我能帮助你。我建议你阅读（以及其他内容）了解浮动及其工作方式，以及如何处理浮动，因为这可能是一项棘手的工作，尤其是在出现问题时。

<div class="footer">
        <div class="wrapper">
            <div class="footer_container">
<ul>
    <li><strong>Title/header</strong>
    <ul>
        <li>Adresse, street</li>
        <li>Tlf: Phone</li>
    </ul>
    <ul class="right">
        <li>Zipcode/City</li>
        <li>Mail: Email</li>
    </ul>
    </li>
    <li><strong>Links</strong>
    <ul>
        <li>Om skolen</li>
        <li>Galleri</li>
    </ul>
    <ul>
        <li>Elever</li>
        <li>For&aelig;ldre</li>
    </ul>
    <ul class="right">
        <li>Kalender</li>
        <li>Fag</li>
    </ul>
    </li>
</ul>
</div>
</div>
</div>


    .footer { background:url(images/footer_bg.png) top repeat-x #e4e2de; width:100%; padding:20px 0 30px 0; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer ul li { display: inline; margin-left: 25px; }
.footer_container { margin:22px 0 0 0;  }

.footer_container ul { margin:0; padding:0; color:#413f3d; width:100%;  }
.footer_container ul li { display:inline-block; list-style:none; margin:0; font-size:11px; text-align:left; vertical-align:top; padding:0; width:270px; }
.footer_container ul li ul { width:120px; float:left; }
.footer_container ul li ul li { display:block; width:auto; }
.footer_container ul.right { float:right; }