Question

我正在为一个非营利组织设计一个网站，我在页脚创建导航时遇到问题，就像看到here那样。

我已经完成了顶部，但看起来像UL彼此相邻的底部部分给了我麻烦！我已经玩了几个小时的html / css，但没有什么接近这个样子所以问这里是我的最后一招。我将发布当前的代码。 **不是说我是专业人士，但我不是HTML / CSS新手，因为我从头开始创建my entire website w / HTML＆amp; CSS。

提前感谢您的帮助！

HTML：

<div id="footer2" class="bottomleft bottomright">
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="">ABOUT</a>
        </li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </li>
    </ul>
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </li>
    </ul>



</div>
<!--end footer2-->

<div id="footer3">
    <br />Copyright © 2014 All rights reserved.
    <br />
    <br />RSCF is a nonprofit organization whose mission is to "empower an educational revolution throughout the South Los Angeles community and beyond..."
    <br />
    <br />
</div>
<!--end footer3-->

</div>
<!--end container-->

CSS

#footer2 {
    background-color: #609;
    width: 980px;
    height: 200px;
    clear: both;
    display: block;
    text-align: center;
    color: #FFF;
    font-size: small;
    padding-top: 10px;
}

#footer2 ul {
    text-align: left;
    height: auto;
    margin: 0px;
}

#footer2 ul li {
    display:inline-table;
    padding: 5px;
}

#footer2 ul li a {
    text-decoration: none;
    color: #FFF;
    padding: 0px 8px 8px 8px;
}

#footer2 ul li a:hover {
    text-decoration: underline;
    font-weight:900;
}

Answer 1

我做的第一件事是删除显示：内联，我用list-style none替换它，以达到与你引用的网站相同的视觉效果。好吧，之后我将所有的ul更改为向左浮动，因此每个都将根据需要进行渲染。

新的css：

#footer2 {
    background-color: #609;
    width: 980px;
    height: 200px;
    clear: both;
    display: block;
    text-align: center;
    color: #FFF;
    font-size: small;
    padding-top: 10px;
}

#footer2 ul {
    text-align: left;
         height: auto;
    margin: 0px;
    float: left;
}


#footer2 ul li {
list-style: none;
padding: 5px;
}

#footer2 ul li a {
    text-decoration: none;
    color: #FFF;
    padding: 0px 8px 8px 8px;
}

#footer2 ul li a:hover {
    text-decoration: underline;
    font-weight:900;
}

我创造了一个小提琴来帮助你弄清楚结果：http://jsfiddle.net/5ms8up9w/

Answer 2

这离我更近一点了。我添加了几个div并将你的id变成了类。

HTML

    <div id="footer">

<div class="footer2 bottomleft bottomright">
    <ul>
        <li>ABOUT</li>
        <li><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </li>
    </ul>
    </div>
    <div class="footer2">
    <ul>
        <li><a href="">ABOUT</a></li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    </div>
    <div class="footer2">
    <ul>
        <li>ABOUT</li>
        <li><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </li>
    </ul>
    </div>
    <div class="footer2">
    <ul>
        <li>ABOUT</li>
        <li><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </li>
    </ul>
</div>
<!--end footer2-->

<div id="footer3">
    <br />Copyright © 2014 All rights reserved.
    <br />
    <br />RSCF is a nonprofit organization whose mission is to "empower an educational revolution throughout the South Los Angeles community and beyond..."
    <br />
    <br />
</div>
<!--end footer3-->

</div>
<!--end container-->

CSS

#footer{width:100%;background-color:red;}
.footer2 {
    background-color: #609;
    width: 25%;
    height: 200px;
    float:left;
    text-align: center;
    color: #FFF;
    font-size: small;
    padding-top: 10px;
}

.footer2 ul {
    text-align: left;
         height: auto;
    margin: 0px;
}


.footer2 ul li {
list-style:none;
padding: 5px;
}

.footer2 ul li a {
    text-decoration: none;
    color: #FFF;
    padding: 0px 8px 8px 8px;
}

.footer2 ul li a:hover {
    text-decoration: underline;
    font-weight:900;
}

小提琴：http://jsfiddle.net/383vdv3z/

在页脚导航

2 个答案: