Question

在“code”标签内使用“div”标签是否可以？我使用NetBeans 8.0.1编写一些html页面。而且在某些时候我不得不在“代码”中使用“div”。您可以在http://jsfiddle.net/125ypcum/

中查看我的部分代码

NetBeans给了我以下错误

元素“div”在此上下文中不允许作为元素“代码”的子元素。

结果是我想要的，但错误让我烦恼。无论如何这是一个问题吗？有没有办法在没有错误的情况下获得相同的结果？

来自jsfiddle的代码：

<div class="codeDiv">
<pre>
<code class="black">stat<sub>0</sub>;
<div class="back-red codeBoxMargin">if (expr<sub>1</sub>)
<div class="back-green codeBoxMargin">  if (expr<sub>2</sub>)
    {
        stat<sub>1</sub>;
        stat<sub>2</sub>;
    }
    else
<div class="back-blue codeBoxMargin">       if (expr<sub>3</sub>)
        {
            stat<sub>4</sub>;
            stat<sub>5</sub>;
        }
        else
            stat<sub>6</sub>;
</div></div>else
    stat<sub>7</sub>;
</div>stat<sub>8</sub>;</code></pre>
</div>

Answer 1

code是内联元素，而div是块元素。块元素不得出现在内联元素内。

如果您想在预先格式化的容器中放置div，请使用pre。但请注意，默认情况下pre按原样显示换行符。或者在span内使用code元素（由LoweBäckström在评论中提出）。

Answer 2

如果您想使用code元素标记代码，但想要特定的演示文稿样式，请使用div之类的元素来设置元素的排列，然后{{1}标记代码本身。对于你的html，这将是：

<code>

注意：我删除了<div class="codeDiv black"> <code>stat<sub>0</sub>; </code> <div class="back-red codeBoxMargin"> <code>if (expr<sub>1</sub>) </code> <div class="back-green codeBoxMargin"> <code> if (expr<sub>2</sub>) { stat<sub>1</sub>; stat<sub>2</sub>; } else </code> <div class="back-blue codeBoxMargin"> <code> if (expr<sub>3</sub>) { stat<sub>4</sub>; stat<sub>5</sub>; } else stat<sub>6</sub>; </code></div></div><code>else stat<sub>7</sub>; </code> </div><code>stat<sub>8</sub>;</code> </div>代码！

然后，您可以使用css声明<pre>设置要保留的空白，并将字体设置为适当的等宽字体。

code { white-space: pre; }

Here's the JSFiddle

code { white-space: pre; font: 1em/1.5 Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace; /* or whatever */ }是一个内联元素，用于标记块级元素（如<code>，<div>等）中的文本范围。虽然大多数浏览器都会愉快地渲染原始的html，但从语法上讲它是不正确的。

在<code>?</code> </div>中使用<div>是否可以

2 个答案: