Html 将代码嵌入我的站点

我有一个非常基本的网站，使用简单的HTML和CSS代码构建。我正在寻找一种方法来嵌入代码，以便创建一个教程。它与我输入的Java代码配合得非常好，但最终结果如下：

以下是相关代码：

<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18</pre></td><td><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">org.openqa.selenium.By</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">org.openqa.selenium.WebDriver</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">org.openqa.selenium.firefox.FirefoxDriver</span><span style="color: #333333">;</span>

<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">WebDriverTest</span> <span style="color: #333333">{</span>

<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">static</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">main</span><span style="color: #333333">(</span>String<span style="color: #333333">[]</span> args<span style="color: #333333">)</span> <span style="color: #333333">{</span>

    WebDriver driver <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> FirefoxDriver<span style="color: #333333">();</span>

    driver<span style="color: #333333">.</span><span style="color: #0000CC">get</span><span style="color: #333333">(</span><span style="background-color: #fff0f0">&quot;http://www.cnbc.com&quot;</span><span style="color: #333333">);</span>

    System<span style="color: #333333">.</span><span style="color: #0000CC">out</span><span style="color: #333333">.</span><span style="color: #0000CC">println</span><span style="color: #333333">(</span>driver<span style="color: #333333">.</span><span style="color: #0000CC">getTitle</span><span style="color: #333333">());</span>

    driver<span style="color: #333333">.</span><span style="color: #0000CC">close</span><span style="color: #333333">();</span>

<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
</pre></td></tr></table></div>

1
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18导入org.openqa.selenium.By；
导入org.openqa.selenium.WebDriver；
导入org.openqa.selenium.firefox.FirefoxDriver；
公共类WebDriverTest{
公共静态void main（字符串[]args）{
WebDriver=newfirefoxdriver（）；
驱动程序。获取（“http://www.cnbc.com");
System.out.println（driver.getTitle（））；
driver.close（）；
}
}

如何更改它，使代码周围的“框”与代码本身一样宽？

默认情况下，

元素具有块显示，默认情况下，块显示的宽度为100%。有两种简单的方法可以解决此问题：

1.使用内联块显示： 可以将div设置为使用内联块显示，使其具有自动宽度：

div#myDiv{
    display: inline-block;
}

---

2：设置宽度。 如果您知道内容的确切宽度，可以直接设置宽度：

div#myDiv{
    width: 400px;
}

---

要澄清的是，您希望灰色背景扩展以适应框的整个宽度，还是希望框的宽度缩小到仅与代码所需的宽度相同？这非常有效。我知道我在这里很贪婪，但是有没有办法使顶部和底部的填充物与左侧和右侧的填充物相等？现在看起来很不均匀，很分散注意力。