html - 将代码嵌入我的网站

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>元素有 block 显示，默认情况下，宽度为 100%。有两种简单的方法可以解决此问题:

1。使用行内 block 显示:

您可以将您的 div 设置为使用内联 block 显示，以便它具有自动宽度:

div#myDiv{
    display: inline-block;
}

JSFiddle

---

2:设置宽度。

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

div#myDiv{
    width: 400px;
}

JSFiddle