html - 网页中的页脚显示为内联元素而不是 block 元素-6ren

html - 网页中的页脚显示为内联元素而不是 block 元素

转载作者：行者123 更新时间：2023-11-28 01:39:15

这里是 HTML 初学者。我的 HTML 脚本遇到了一个非常奇怪的错误。当我显示它时，页脚看起来像内联元素一样被格式化。它显示在我的时间轴的一侧，而不是页面底部。

这是一个屏幕截图: Webpage Screenshot

代码如下:

 <DOCTYPE HTML>
        <html>
        <head>
        <meta charset="utf-8">
        <title>About Mangetsu Budogu</title>
        <style>
        /*Total Body width must be greater than widths for content */
        /*global scope css */
            body{
                width: 1080px;
                font-family: Arial, Verdana, sans-serif;
                color: #665544; 
                }
            .main_content{
                float: left;
                width: 620px;
                margin: 10px;
                }
        /* Nav Bar CSS */
            nav {
                overflow: hidden;
                background-color: #333;
                font-family: Arial, Helvetica, sans-serif; 
                border-radius: 25px;
                width: 99%;
                text-align: center;
            }
            nav a{
                float: center;
                font-size: 16px;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            nav a:hover{
                background-color: red;
                }
            nav li{
                display: inline;
                padding: 5px;
            }


        /* Timeline */
            .timeline{
                float: left;
                width: 300px;
                margin: 10px;
                }

            li{
                margin: 10px 0;
                }
        /* Main Content*/
        #main_heading{
            text-align: center;
            padding-top: 25px;
            padding-bottom: 25px;
        }
        footer { 
            display: block;
        }
        </style>

        </head>

        <header>
            <center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
            <nav>
                <ul id="nav_li">
                 <li><a href="http://www.hawkeyekendo.com/home">Home</a></li>
                 <li><a href="https://www.hawkeyekedo.com/about">About</a></li>
                        <li><a href="../../test">Products</a></li>
                        <li><a href="../Classes">Classes</a></li>
                        <li><a href="../contact">Contact</a></li>
                </ul>
                </nav>
        </header>

        <body>
            <h1 id="main_heading">About Mangetsu Budogu</h1>
            <article class="main_content">

                <h2>Beginnings</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
                    </p>
                    <p>
                    Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex.   </p>

                <h2>The 1990s Era</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
                </p>
            </article>
            <div class="timeline">
                <h3>Mangetsu Budogu Timeline</h3>
                <ul>
                    <li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
                    <li>1995: Created first Kendogu Website in Japan</li>
                    <li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
                    <li>1999: Creation of the Mangetsu Budogu Reward Points</li>
                    <li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
                    <li>2010: Creation of the Shingsengumi Line of Bogu</li>
                    <li>2011: First Overseas Store in Los Angeles, California</li>
                </ul>
            </div>

        <footer>
            &copy; Mangetsu Budogu 2018
        </footer>
        </body>
        </html>