HTML5の<pre>の横幅を自動調整する方法

HTML5の<pre>の横幅を自動調整する方法を教えて下さい。

HTMLにソースコードなどを直接記す際に<pre></pre>を使っています。
これを枠線＝Borderで囲みたいです。
その際、<pre></pre>の内容によって横幅を自動で調整することは可能ですか？

今までは場所毎に、CSSのWidthでピクセル指定していたのですが、
自動で調整してくれれば楽だなと思い、質問してみました。

下手くそな画像も作ってみました。是非ご指導の程、よろしくおねがいします。

No.3 回答者： ORUKA1951 回答日時： 2015/08/09 09:06

＞display:table;を使っても意図する表現ができました！

　display:inline-block;
だと、インライン(行内要素)ですから、pre(ブロック要素)を偏光してしまいます。そのためサンプルで示したものをdisplay:inline-block;にすると横に並んでしまうはずです。

No.2 回答者： ORUKA1951 回答日時： 2015/08/07 09:56

pre{display:inline-block;}

でも良いのですが、それだと横幅の短いテキストのpre要素が連続する場合は横に並んでしまいます。
　そこで
pre{display:table;}
　を使うことが多いですね。
[実例]
pre.CSS{display:table;border:solid 1px gray;padding:0.4em 0;counter-reset:code;}
pre.CSS code{line-height:1.6em;margin:0;padding:0.4em;}
pre.CSS code:before{
content:counter(code,decimal-leading-zero)" ";
counter-increment: code;
}

<section>
　<pre class="CSS"><code>h1{font-size:1.8em;}</code>
<code>h2{font-size:1.5em;}</code>
<code>h3{font-size:1.3em;}</code>
<code>h4{font-size:1.2em;}</code>
<code>h5{font-size:1.1em;}</code></pre>
　<pre class="CSS"><code>h1,h2,h3,h4,h5,h6,p,ol,ul,dl{margin:0;line-height:1.6em;}</code>
<code>p,dd{text-indent:1em}</code>
<code>table{margin:5px;border:solid 1px gry;border-collapse:collapse;}</code>
<code>table th,table td{border:solid 1px gray;padding:0.1em 0.2em;}</code>
<code>div.note mark{background-color:yellow;color:red;padding:0 0.5em;}</code>
<code>div.note.space{line-height:2em;}</code></pre>
</section>

この回答へのお礼

ご指導ありがとうございます。

細かなコードまで頂き感謝感激です。
display:table;を使っても意図する表現ができました！

ありがとうございます♪

お礼日時：2015/08/09 04:05

No.1 回答者： Ogre7077 回答日時： 2015/08/06 13:11

<pre style="display:inline-block;"></pre>

この回答へのお礼

ご指導ありがとうございます。
一発で出来ました。

インライン要素はこんな時も使えるんですねぇ。
リストを横並びにする時にしか使ったことがありませんでした。
凄すぎて鼻血が出そうです。

ありがとうございます！

お礼日時：2015/08/06 13:44