Question

我有以下HTML

 <!DOCTYPE html>
    <html>
        <body>

        <h1>My Great Web</h1>
        <FONT SIZE = "5">
        <ol>
            <li> Foo. </li>
            <li> Bar. </li>
        <ol>
        </FONT>

        <br>
        <hr style="width: 100%"/>


       </body>
    </html>

产生下图。 enter image description here

请注意，水平线不会完全向左延伸。我怎么能这样做？

Answer 1

您必须关闭 <ol>

 <ol>
   <li> Foo. </li>
   <li> Bar. </li>
 </ol>

Answer 2

HTML5不支持字体标记。请改用CSS。在HTML 4.01中不推荐使用font元素。

某些浏览器可能显示效果不佳

<html>
    <body>

    <h1>My Great Web</h1>

   <div style="font-size:12px;">
    <ol>
        <li> Foo. </li>
        <li> Bar. </li>
    </ol>
    </div>

    <br>
    <hr/>


   </body>
</html>

Answer 3

这样做：

 <!DOCTYPE html>
    <html>
    <head>
    <style>
        body {
            margin: 0 ;
            padding: 0;
            font-size: 14px;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
    </style>
    </head>
        <body>

            <div class="container">
                <h1>My Great Web</h1>
                    <div class="list">
                       <ol>
                            <li> Foo. </li>
                            <li> Bar. </li>
                        <ol>
                    </div>

                <br />

            </div>

                <hr />

       </body>
    </html>

如何在HTML中创建水平线（<hr />）跨越所有页面宽度

3 个答案: