网页

Question

如果你查看你看到的代码ul和li，我对我的站点地图有疑问。但是每个UL都低于另一个，我希望它能够并排。每个新的UL并排。我怎么做这个？和小孩一起工作？（站点地图在我的内部）

网页

                                <ul>
                                    <li>Opleiding</li>
                                        <ul>
                                            <li>Visie & Beleid</li>
                                            <li>Opbouw Studieprogramma</li>
                                            <li>Competenties</li>
                                            <li>Diploma</li>
                                            <li>Beroepen</li>
                                        </ul>

                                    <li>Onderwijsprogramma</li>
                                        <ul>
                                            <li>Mededelingen</li>
                                            <li>Uitagenda</li>
                                            <li>Propedeuse</li>
                                            <li>Verdieping 1</li>
                                            <li>Verdieping 2</li>
                                            <li>Afstuderen</li>
                                        </ul>

                                    <li>Organisatie</li>
                                        <ul>
                                            <li>Contact</li>
                                            <li>Blog</li>
                                            <li>Docenten</li>
                                            <li>Onderwijsbureau</li>
                                            <li>Stagebureau</li>
                                            <li>Buitenlandbureau</li>
                                            <li>Examencommissie</li>
                                            <li>Decaan</li>
                                        </ul>

                                    <li>Stages en Projecten</li>
                                        <ul>
                                            <li>Stages</li>
                                            <li>Projecten</li>
                                        </ul>
                                </ul>

这是我的CSS

footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}

Answer 1

尝试显示内嵌块或左右浮动你想要的ul。我建议添加类以使样式更容易

HTML：

<ul>
                                <li>Opleiding</li>
                                    <ul class="sitemap">
                                        <li>Visie & Beleid</li>
                                        <li>Opbouw Studieprogramma</li>
                                        <li>Competenties</li>
                                        <li>Diploma</li>
                                        <li>Beroepen</li>
                                    </ul>

                                <li>Onderwijsprogramma</li>
                                    <ul class="sitemap">
                                        <li>Mededelingen</li>
                                        <li>Uitagenda</li>
                                        <li>Propedeuse</li>
                                        <li>Verdieping 1</li>
                                        <li>Verdieping 2</li>
                                        <li>Afstuderen</li>
                                    </ul>

                                <li>Organisatie</li>
                                    <ul class="sitemap">
                                        <li>Contact</li>
                                        <li>Blog</li>
                                        <li>Docenten</li>
                                        <li>Onderwijsbureau</li>
                                        <li>Stagebureau</li>
                                        <li>Buitenlandbureau</li>
                                        <li>Examencommissie</li>
                                        <li>Decaan</li>
                                    </ul>

                                <li>Stages en Projecten</li>
                                    <ul class="sitemap">
                                        <li>Stages</li>
                                        <li>Projecten</li>
                                    </ul>
                            </ul>

CSS：

footer .sitemap {
display: inline-block;
OR
float: left;
}

Answer 2

嗯，对于初学者来说，你的标记是无效的。如果要将UL嵌套在另一个UL内，则需要在LI

内部

<ul>
    <li>Title
          <ul>
              <li>Sub-Title</li>
          </ul>
    </li>
</ul>

从那里，你可能只需要这样的东西：

footer > ul > li {
    float:left;
    width:50%;
}

http://jsfiddle.net/fTCY5/

页脚：站点地图并排

网页

2 个答案: