如何使 HTML 中的水平线 (<hr>) 跨越所有页面宽度答案

【问题标题】：How to make horizontal line (<hr>) in HTML span through all page width如何使 HTML 中的水平线 (<hr>) 跨越所有页面宽度
【发布时间】：2013-11-26 17:46:53
【问题描述】：

我有以下 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>

产生下图。

请注意，水平线并未完全向左延伸。我该怎么做？

【问题讨论】：

关闭你的<ol> => </ol>

标签： html web

【解决方案1】：

你必须关闭你的 <ol>

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

【讨论】：

【解决方案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>

【讨论】：

通知<ol>结束关闭</ol>

【解决方案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>

【讨论】：