HTML ファイル内の特定の要素を強調表示するために CSS を使用しています (JQuery 経由ですが、この質問とは関係ありません)。ファイル内の論理要素を区切るために「pre」タグを使用していますが、「pre」タグは要素間に改行を残すように見えることに気付きました。
CSS を使用してこれらを取り除くことはできますか?
（または、「pre」タグの代わりに何を使うべきでしょうか？テキスト要素自体にHTML要素が含まれている場合があります。ないレンダリングされ、ソースコードとして文字通り表示される必要があります。そのため、私は最初に「pre」タグを選択しました。
私が使用しているHTMLの例は次のとおりです: (http://docs.jquery.com/jQuery のダウンロードこの例では
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>
私は Firefox 3.6.12 を使用しています。上記のコードを実行すると次のようになります:
そして、これは私が望むもののシミュレートされた出力です (黄色に切り替わっていますが、これは vim エディタを使用したためであり、赤であるかのように見せてください)。
解決：
すべての PRE タグに 'display:inline' を使用することです。(以前は、上記の例では 'error' タグにのみ 'display:inline' を適用しており、'ok' pre タグに同じことを行うのを忘れていました。)
ベストアンサー1
これは<pre>デフォルトのスタイルを持っているためdisplay: block、CSSで使用します。pre { display: inline}
編集に関しては、margin: 0;スタイルを設定したいブロックだけでなく、すべての pre ブロックに追加する必要があります。
pre {
display: inline;
margin: 0;
}
可能な限り JS によるスタイル設定を避けるようにしてください。ただし、どうしても必要な場合は、次の点に注意してください。
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
$("pre").css({ "margin" : 0, "padding" : 0 })
</script>