Question

我正在使用以下代码以及带有可选语言包的wp-syntaxhighlighter插件（例如lisp）。我希望水平滚动条始终可见，而不是仅在代码块的末尾。请问如何实现这一目标？

<div style="overflow:auto;max-height:400px;width:600px">
  <pre class="brush: lisp; gutter: true">
  CODE GOES HERE
  </pre>
</div>

Example http://www.lawlist.com/images/horizontal_scroll_bar_a.png Example http://www.lawlist.com/images/horizontal_scroll_bar_b.png

编辑：以下是以下代码的屏幕截图：<div style="overflow:auto;max-height:400px;width:600px;overflow-x:scroll;">。添加overflow-x:scroll;会导致出现第二个水平滚动条，但没有蓝色滑块。

Example http://www.lawlist.com/images/horizontal_scroll_bar_c.png

Answer 1

基于@ilias提供的有用链接，并基于@Arjun Chaudhary的有用评论，以下代码解决了该问题：

<style type="text/css">
  .syntaxhighlighter {
    width: 500px;
    height: 500px;
    overflow-y: auto !important;
    overflow-x: auto !important;}
</style>

<pre class="brush: lisp">

INSERT-CODE-SNIPPET-HERE

</pre>

或，修改shCore.css的{{1}}（又名syntaxhighlighter）：

wp-syntaxhighlighter

Example http://www.lawlist.com/images/horizontal_scroll_bar_d.png

Wordpress Syntaxhighlighter - 水平滚动条可见性

1 个答案: