1

我浪费了太多的精力和时间试图用 HTML/CSS 创建这个页脚，我就是做错了。有人告诉我最好的方法是使用<ul>and <li>，但是让它正确对齐是一个挑战！

这就是它应该的样子 这就是它应该的样子

这是我的版本的样子 这是我的版本的样子

我试图做的是以下内容：（CSS在下面）。

<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; }

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

谢谢

4

1 回答 1

0

我会改变它，而不是在页脚内使用容器。

HTML

<div class="footer_container">
    <div class="container">
        <strong>Title</strong>
        <ul>
            <li>Adresse</li>
            <li>Tlf: Phone</li>
            <li>Zipcode/City</li>
            <li>Mail: Email</li>
        </ul>
    </div>
    <div class="container">
        <strong>Links</strong>
        <ul>
            <li>Om skolen</li>
            <li>Elever</li>
            <li>Kalender</li>
            <li>Galleri</li>
            <li>For&aelig;ldre</li>
            <li>Fag</li>
        </ul>
    </div>
    <div class="container">
        Your FB/Twitter things
    </div>
</div>​

CSS

.footer_container{
    width: 960px;
}
.footer_container strong{
    font-weight: bold;
}
.footer_container div.container{
    width: 320px;
    float: left;
}
.footer_container ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_container ul li {
    width: 160px;
    float: left;
}

演示

在jsFiddle 结束。

于 2012-09-19T15:22:03.370 回答