Question

所以我正在编写一个编码教程网站，我希望将代码片段直接放在HTML中。我制作了一个HTML和CSS代码片段，效果很好。但是，当我把它放在一个表中时，突然溢出停止工作，而是导致整个页面水平滚动。请帮我解决这个问题。

由于

没有表格：

<html>
<body >
<style>
pre {
    overflow: auto;
    color: white;
    background: #000000;
    padding: 0;
    font-size: 0.8rem;
    font-family: Menlo, Monaco, monospace;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    position: relative;
}

pre[rel] {
    padding-top: 33px;
}

pre[rel]:before {
    content: attr(rel);
    color:#000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #CCCCCC;
    font-family: 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
    font-weight: 500;
    font-style: normal;
    padding: 5px 0;
    text-indent: 15px;
}

pre code {
    font-family: Menlo, Monaco, monospace;
    background: none;
    padding: 15px;
    white-space: pre;
    overflow: auto;
    display: block;
}
</style>
<pre rel="HTML"><code class="language-none">  
&lt;html&gt;
  &lt;head&gt; 
    &lt;title&gt;Hello World&lt;/title&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
  &lt;/body&gt; 
&lt;/html&gt;
</code></pre>
</body>

</html>

表：

<html>
<body>
<style>
pre {
    overflow: auto;
    color: white;
    background: #000000;
    padding: 0;
    font-size: 0.8rem;
    font-family: Menlo, Monaco, monospace;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    position: relative;
}

pre[rel] {
    padding-top: 33px;
}

pre[rel]:before {
    content: attr(rel);
    color:#000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #CCCCCC;
    font-family: 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
    font-weight: 500;
    font-style: normal;
    padding: 5px 0;
    text-indent: 15px;
}

pre code {
    font-family: Menlo, Monaco, monospace;
    background: none;
    padding: 15px;
    white-space: pre;
    overflow: auto;
    display: block;
}
</style>
<table>
  <tr>
    <td>
<pre rel="HTML"><code class="language-none">  
&lt;html&gt;
  &lt;head&gt; 
    &lt;title&gt;Hello World&lt;/title&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
  &lt;/body&gt; 
&lt;/html&gt;
</code></pre>
</td>
</tr>
</table>
</body>

</html>

Answer 1

指定<pre>

的宽度

Have an example!

pre {
    width: 500px;
}

Answer 2

public partial class WUCHeader : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Cookies["UserCode"] == null)
        {
            PnlHome.Visible = true;
            PnlLogin.Visible = false;
        }
        else
        {
            PnlLogin.Visible = true;
            PnlHome.Visible = false;
            LblUserName.Text = Request.Cookies["Name"].Value;
        }

    }
    protected void Logout_Click(object sender, EventArgs e)
    {
        if (Request.Cookies["UserCode"] != null)
        {
            Response.Cookies["UserCode"].Expires = DateTime.Now.AddDays(-1);
            Response.Cookies["Name"].Expires = DateTime.Now.AddDays(-1);
        }
    }
}

在HTML中插入代码片段

2 个答案: