2

このフィドルを見てください：ここ

私が探しているのは、最初の例で上部の余分なスペース (黒い円形1とタグの上端の間のスペース) を削除しpre、2 番目の例のように見せる方法です。

最初の例には、その上に余分なスペースがあります (強力な要素からのマージンを除く)。<pre><code>余分な改行を削除すると、コードが本当に読みにくくなるため、その余分な改行を削除したくないためです。 、だから私はこれを追加しました

pre > code > strong:first-of-type { margin-top: 10px; }

うまくいくと思ったのですがstrong、最初の行に複数のタグがある可能性があることを忘れていました。今、私は何をすべきかわかりません。私の問題の回避策はありますか?

4

3 に答える 3

2

私は同じ問題にぶつかり、解決策を見つけるのに 1 時間以上費やしました。@Ficoの回答に同意し、追加情報でサポートしたいと思いました。

これを行う代わりに：

<pre><code>
    My code snippet
    Another line
</code></pre>

あなたはこれをしたい：

<pre><code>    My code snippet
    Another line
</code></pre>

最初の行のインデントには同じスペースを使用する必要があることに注意してください。

私は他のいくつかの「標準的なウェブサイト」を見ました。たとえば、StackOverflow は 内のコード スニペットに対してこれを行います<pre><code>。Highlight.js ライブラリの公式デモ例も同じ規則を使用しています。これは HTML ソースでは少し見苦しく感じますが、経験則では、内部のコンテンツは要素<code>と同じ行から開始する必要があるようです。<code>

@Marc Audet が提案した解決策にも問題があります。負の上部マージンを使用すると、ボーダーがある場合 (または将来それを配置する場合) に上書きされます。

JavaScript を少しだけ使用する場合は、おそらく回避策があります。<pre><code>基本的に、これを使用するだけで内部のすべてのコンテンツをトリミングできます。

  <script>
  $( document ).ready(function() {
    $(document.body).find("pre code").each(function() {
      $(this).html($.trim($(this).html()));
    });
  });
 </script>

ここでフィドルを見ることができます：http://jsbin.com/bayawazi/2/edit

JavaScript アプローチの利点は、<code>要素を自由に配置できることです。また、ほとんどのコード スニペットでは、余分な行を削除することをお勧めします。

于 2014-04-10T23:43:35.860 に答える
1

スタイルを変更しないでください。pre タグ内で作業しているため、問題が発生します。これを修正するためにスタイルを変更することは、マークアップ構造を修正するためのハックになります エンジン ブラウザによる pre タグ内のスペース管理は非常に特殊です。

次のように事前コンテンツを変更すると、すべてが正常に表示されます

あなたのコード

<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

変更(2 行目は最初の行を継続する必要があります...)

<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

ここでフィドル

于 2013-04-26T16:37:34.910 に答える