html - css - <div> 等で改行させない

 
1. 現象
2. <div> で改行させない
3. <table> はしょうがないんで
4. display の整理

1. 現象

 このサイト、本文はほぼ <pre>~</pre> でかこんでおりまして。  <pre></pre> を CSS の定義で

pre									改行に関係あるような個所のみ抜き出しています
{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
 てなことをしています。  その弊害といいますか、<div>~</div> や <table>~</table> の後に改行がはいってしまうのです。

<div style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em;">div</div>
 直後の行
 て書くと、下記のように1行あいてしまうのです。
div
 直後の行  テーブルの場合も同様です。

<table style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em;"><tr><td>table</td></tr></table>
 直後の行
table
 直後の行

2. <div> で改行させない

 こちらは「html css divタグが改行されるのを改行させない件」を参考にさせていただきました。  <div></div> の場合は、display: inline-block; で解消します。

<div style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em; display: inline-block;">div</div>
 直後の行
 と書けば
div
 直後の行  ところが <table></table> の場合は、うまくいかないんだな。

<table style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em;"><tr><td>table</td></tr></table>
 直後の行
table
 直後の行

3. <table> はしょうがないんで

 <table> はしょうがないんで、<pre> を解除することにしました

</pre><table style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em;"><tr><td>table</td></tr></table><pre>
 直後の行
table
 直後の行

 これで、あきらめるしかないかなぁ。

4. display の整理

 とりあえず、display についてまとめておくと。いぁ・・・まとまらないなぁ。  設定する値の種類が多すぎて・・・。  とりあえず、リンクはッときます。
display - CSS | MDN
 以前は「display: inline-block;」は Firefox では「_display: inline;」とか書かなきゃならなかったのですが、今は大丈夫みたい(?)です。