pygments HTML的CSS样式答案

【问题标题】：CSS styling of pygments HTMLpygments HTML的CSS样式
【发布时间】：2016-01-03 22:50:26
【问题描述】：

我使用 Python 库 pygments 对一些代码进行 pygment 化，然后将其放到我创建的网站上。我见过很多网站显示代码，但是当代码包含长行时，溢出就会被隐藏起来。我不喜欢它被隐藏并希望使容器可滚动。但是，当我添加 CSS 规则时：

.highlighttable {
    margin: auto;
    max-width: 75vw;
}

.highlighttable .code {
    max-width: calc(74vw - 100px);
    overflow: auto;
}

整个过程是这样的：

我猜这里发生了以下情况：

滚动条被计算为.code div 元素的大小。
包含 div 的 .code 的大小变大了
包含行号的 div 以某种方式垂直位于中间

所以我尝试添加以下 CSS 规则：

.linenodiv {
    vertical-align: top;
}

.linenodiv pre {
    vertical-align: top;
}

但是，行号 div 仍然移动，如屏幕截图所示。以下是整个表格的HTML代码：

<table class="highlighttable">
    <tbody>
        <tr>
            <td class="linenos">
                <div class="linenodiv">
                    <pre>1
2
3
4
5
6</pre>

                </div>
            </td>
            <td class="code">
                <div class="highlight">
                    <pre><span class="k">class</span> <span class="nc">TestClass</span><span class="p">:</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="k">pass</span>

<span class="k">def</span> <span class="nf">test_method</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">):</span>
<span class="k">print</span><span class="p">(</span><span class="n">arg1</span><span class="p">)</span>
</pre>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我在这段代码中减少了arg1s的数量，因为它只是为了显示html代码的结构。

如何将行号 div 向上移动？

编辑#1

这是jsfiddle

似乎 jsfiddle 处理 css 溢出属性的方式与我计算机上的 Firefox 处理方式不同。 jsfiddle 根本不会为overflow: auto; 呈现滚动条，并且该问题在那里不可见。相反，它只是将文本写入 div 之外，就好像有一个 overflow: visible;

【问题讨论】：

拜托，你能给我们看看小提琴吗？ :)
@PDKnight：做到了。但是，jsfiddle 存在不呈现任何滚动条的问题。
可以join the chatroom吗？ :)

标签： python html css alignment pygments

【解决方案1】：

问题是我没有申请

vertical-align: top;

到正确的元素。我现在将它应用到 td 类 .linenos 在这里可见：enter link description here

感谢@PDKnight，您的输入让我检查了当我将其应用于该 td 元素时会发生什么。

【讨论】：