如何让这些HTML元素从上到下依次显示？ [英] How can I get these HTML elements to display one after the other, from top to bottom?

问题描述

我有一些HTML和CSS显示如下：



图像（破碎/占位符）

菜单/导航

页脚

div与H2



我希望页脚位于底部。对于div / H2和页脚，我正在使用float left。为什么页脚显示在div / H2之前，如何反转？



这是代码：



HTML

I've got some HTML and CSS that displays like so:

image (broken/placeholder)
Menu/Nav
Footer
div with H2

I want the footer at the bottom. I'm using "float left" for both the div/H2 and the Footer. Why does the footer display prior to the div/H2, and how can I reverse that?

Here's the code:

HTML

<header>
    <img src="bla.png" />
    <nav>
        <ul class="top-level-menu">
            <li> <a href="#">Schedules</a>

                <ul class="second-level-menu">
                    <li name="mniOpenExisting" id="mniOpenExisting">Open Existing</li>
                    <li>Create New...
                        <ul class="third-level-menu">
                            <li name="mniCreateNewScheduleBasedOnExisting" id="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
                            <li name="mniCreateNewScheduleFromScratch" id="mniCreateNewScheduleFromScratch">From Scratch</li>
                        </ul>
                    </li>
                    <li name="mniSaveCurrentSchedule" id="mniSaveCurrentSchedule">Save Current</li>
                    <li name="mniEmailCurrentSchedule" id="mniEmailCurrentSchedule">Email Current</li>
                    <li name="mniPrintCurrentSchedule" id="mniPrintCurrentSchedule">Print Current</li>
                </ul>
            </li>
            <li><a href="#">Job/Locations</a>

                <ul class="second-level-menu">
                    <li name="mniAddNewJobLoc" id="mniAddNewJobLoc">Add New</li>
                    <li name="mniViewOrEditJobLoc" id="mniViewOrEditJobLoc">View or Edit</li>
                </ul>
            </li>
            <li><a href="#">Workers</a>

                <ul class="second-level-menu">
                    <li name="mniAddNewWorker" id="mniAddNewWorker">Add New</li>
                    <li name="mniViewOrEditWorker" id="mniViewOrEditWorker">View or Edit</li>
                    <li name="mniWorkerPreferences" id="mniWorkerPreferences">Preferences</li>
                </ul>
            </li>
            <li><a href="#">Rules</a>

                <ul class="second-level-menu">
                    <li name="mniSetRules" id="mniSetRules">Establish/Maintain</li>
                </ul>
            </li>
            <li><a href="#">Help</a>

                <ul class="second-level-menu">
                    <li name="mniAbout" id="mniAbout">About</li>
                    <li name="mniHowTo" id="mniHowTo">How To...</li>
                    <li name="mniContact" id="mniContact">Contact Us</li>
                    <li name="mniAcquireLicense" id="mniAcquireLicense">Acquire License</li>
                </ul>
            </li>
        </ul>
    </nav>
    <header>
        
        <div>
<h2 class="floatleft">bla</h2>
</div>
        <footer class="floatleft">Bla footer</footer>

CSS

CSS

.floatleft {
    float: left;
    display: block;
}
.third-level-menu {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.third-level-menu > li {
    height: 30px;
    background: gray;
}
.third-level-menu > li:hover {
    background: white;
}
.second-level-menu {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background: orange;
    color: white;
}
.second-level-menu > li:hover {
    background: green;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    /*margin: 0;*/
    margin-bottom: 12px;
    width: 100vw;
    /* display: block; */
}
.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: black;
}
.top-level-menu > li:hover {
    background: lightgray;
}
.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}
/* Menu Link Styles */
 .top-level-menu a
/* Apply to all links inside the multi-level menu */
 {
    font: bold 16px Candara, Calibri, 'Segoe UI', serif;
    color: white;
    text-decoration: none;
    padding: 0 0 0 10px;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
    margin-bottom: 12px;
}
.top-level-menu a:hover {
    color: black;
}

推荐答案

我认为第一个

<header></header>

没有结束标记而是另一个

which has no closing tag instead another

<header> </header>

标记已打开。

这篇关于如何让这些HTML元素从上到下依次显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！