- 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>
直後の行
て書くと、下記のように１行あいてしまうのです。
div
直後の行
テーブルの場合も同様です。
<table style="text-align: left; border: 1px solid black; margin-left: 2em; width: 10em;"><tr><td>table</td></tr></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>
直後の行
直後の行
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>
直後の行
直後の行
これで、あきらめるしかないかなぁ。
4. display の整理
とりあえず、display についてまとめておくと。いぁ・・・まとまらないなぁ。
設定する値の種類が多すぎて・・・。
とりあえず、リンクはッときます。
「display - CSS | MDN」
以前は「display: inline-block;」は Firefox では「_display: inline;」とか書かなきゃならなかったのですが、今は大丈夫みたい（？）です。
|
|
