![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
>display:table;を使っても意図する表現ができました!
display:inline-block;
だと、インライン(行内要素)ですから、pre(ブロック要素)を偏光してしまいます。そのためサンプルで示したものをdisplay:inline-block;にすると横に並んでしまうはずです。
No.2
- 回答日時:
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>
この回答へのお礼
お礼日時:2015/08/09 04:05
ご指導ありがとうございます。
細かなコードまで頂き感謝感激です。
display:table;を使っても意図する表現ができました!
ありがとうございます♪
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) エクセルのマクロについて教えてください。 1 2022/12/26 12:05
- PHP ECCUBE4のページ管理でPHPを実行させたい 1 2023/04/06 11:42
- TOEFL・TOEIC・英語検定 英文法(他動詞・自動詞の解釈)you pre-register online 1 2023/03/09 00:18
- HTML・CSS HTMLのテーブル 2 2022/09/25 01:01
- Excel(エクセル) 【マクロ】webアドレスにて指定されたCSVファイル【excelソフト表示】を印刷する件 1 2023/02/15 01:52
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- その他(スマートフォン・携帯電話・VR) Bluetoothイヤホンとスマホの音量を連動させたい 1 2023/03/25 15:55
- 英語 Pre-existing periapical pathology, when the apices 1 2023/04/27 22:27
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- Excel(エクセル) Excel2019 マクロを使用し画像を貼り付けした際のリンク切れについて 2 2022/11/15 16:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定の文字のみcssを適用するに...
-
上付き文字と下付き文字を同時...
-
jquery.validationEngine.jsカ...
-
文字の位置、上下のマージンが...
-
フォントのサイズが変わりませ...
-
ホームページビルダー作成HPがi...
-
fontサイズ指定の ”-(マイナ...
-
テキストファイルの行を指定し...
-
CSSで英語はふつうの大きさ...
-
html,cssでスマホとパソコンで...
-
リンク色の定義を2セット作る...
-
Htmlとcssの勉強のため手書きで...
-
CSSで一般的でSEOに有効な値(...
-
HTML5の<pre>の横幅を自動調整...
-
fc2無料ホームページにて携帯サ...
-
横幅は、640ピクセル?600ピク...
-
HPの文字化け対策
-
リンク文字
-
cssで指定するfontサイズについ...
-
Linkタグのcharset属性について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBサイトの作成で、imgタグに...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
全角半角含めて等幅で表示したい
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
Format 関数 表示書式指定文字...
-
リンク文字
-
fontサイズ指定の ”-(マイナ...
-
HTMLで特定の文字だけ色を変え...
-
CSSを一部無効にしたい
-
指定の文字だけ色を変える
-
上付き文字と下付き文字を同時...
-
Excel VBA メール作成について ...
-
遊明朝のプロポーショナルフォ...
-
jquery.validationEngine.jsカ...
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
おすすめ情報