Question

我有一个多层结构的div结构，在这里我想利用<pre>和<code>来使用一些语法。

本质上，它看起来类似于：

<div class="one">
  <div class="two">
     <div class="three">
        <pre class="syntax-hl">
          <code>
            //my JS code here
          </code>
        </pre>
     </div>
  </div>
</div>

我看到的是，在渲染时，它将保留其所有选项卡，并将整个代码块（4）选项卡移入其中，而不是预期的结果只有1个。

我尝试应用不同的white-space设置，因为它们会修剪前导空格，但是当他们删除前导空格时，它们也会丢失所有标签。

有人遇到过这个问题，或者知道一种解决方法吗？

这是一个非常简单的例子，您可以使用它来解释我要解决的问题。 https://jsfiddle.net/d3e26p0w/

Answer 1

一种解决方案是将ISBLANK移到border，然后您可以给pre留负的空白。

code

pre.syntax-hl {
  margin: 2rem;
  border: 1px solid red;
}

pre.syntax-hl > code {
  display: block;
  width: 100%;
  margin-left: -6ch;
}

但是要回答您的问题，不，<div class="one"> <div class="two"> <div class="three"> <pre class="syntax-hl"><code> request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data=JSON.parse(request.responseText); } else { //We reached our target server, but it returned an error } }; </code></pre> </div> </div> </div>块内的缩进不是从父级的缩进开始的。在CSS中，无法使缩进取决于<code>在源代码行中的位置。

如何重置<pre> <code>中的选项卡？

1 个答案: