人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLで数行にわたる文章を番号以外を字下げしたいのですが、方法がわかりません。
テーブルで処理しようとすると数字がうまく配置できませんでした。よろしくお願い致します。

●質問者: mika555
●カテゴリ:インターネット
✍キーワード:HTML 数字
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Mook
●23ポイント

LI タグを使用してはどうでしょうか。

のように書くと

<OL>
<LI>&lt;LI&gt;タグはList Itemの略で、リストの項目を記述する際に使用します。 リスト表示したい項目に&lt;LI&gt;タグをつけて&lt;UL&gt;?&lt;UL&gt; または&lt;OL&gt;?&lt;OL&gt;の間に記述します。 

<LI>&lt;UL&gt;と&lt;OL&gt;の使い分けですが、 &lt;UL&gt;はUnordered Listの略で、リスト項目に順序を付けない場合に使用し、 &lt;OL&gt;はOrdered Listの略で、リスト項目に順序を付ける場合に使用します。 
</OL>

下記のように表示されます。

  1. <LI>タグはList Itemの略で、リストの項目を記述する際に使用します。 リスト表示したい項目に<LI>タグをつけて<UL>?<UL> または<OL>?<OL>の間に記述します。
  2. <UL>と<OL>の使い分けですが、 <UL>はUnordered Listの略で、リスト項目に順序を付けない場合に使用し、 <OL>はOrdered Listの略で、リスト項目に順序を付ける場合に使用します。

http://www.htmq.com/html/li.shtml

解答欄の表示はブラウザによっては異なってしまいますが、HTMLの方は期待通りになるかと思います。


2 ● hate_na_com
●23ポイント

テーブルでレイアウトするのであれば、1列目に「番号」、2列目に「番号に対応した文章」、一つの「番号」で1行として、「番号」が増えるごとに行を増やしていけば解決できると思います。

http://deztec.jp/design/05/02/20_table.html


3 ● KID the Euforia
●22ポイント

番号付きリストの中のdiv要素の左余白で調整するってのはどうでしょうか。

http://msugai.fc2web.com/web/CSS/padding.html

<html>

<head>

<style>

<!--

div.20px {

padding-left: 20px;

}

div.40px {

padding-left: 40px;

}

div.60px {

padding-left: 60px;

}

div.200px {

padding-left: 200px;

}

</style>

</head>

<body>

<ol>

<li><div class="20px">item1 20px</div></li>

<li><div class="40px">item2 40px</div></li>

<li><div class="60px">item3 60px</div></li>

<li><div class="200px">item4 200px</div></li>

<li><div class="20px">item5 20px<br>複数行<br>複数行</div></li>

</ol>

</body>

</html>


4 ● Redstock
●22ポイント

定義リストを利用してみてはいかがでしょうか?

http://www.tohoho-web.com/html/dl.htm

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ