将代码嵌入我的网站

Question

我有一个非常基本的网站，使用简单的HTML和CSS代码构建。我正在寻找一种方法来嵌入代码以创建教程，并遇到了http://hilite.me/。它与我放入的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>

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

Answer 1

默认情况下，<div>元素具有块显示，默认情况下，其宽度为100％。有两种简单的方法可以解决这个问题：

1。使用内联块显示：

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

div#myDiv{
    display: inline-block;
}

JSFiddle

---

2：设置宽度。

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

div#myDiv{
    width: 400px;
}

JSFiddle