2011.07.30
css

リスト ul li で左側の隙間

リスト表示するときに使うulとli。

  • 今日
  • 昨日
  • 明日

上記のように点を使って箇条書きにするときに使います。

上記のHTMLソースは

<ul>
  <li>今日</li>
  <li>昨日</li>
  <li>明日</li>
</ul>

これをそのまま使うと、左側にかなり広い隙間ができてしまいます。
この隙間をなくすにはCSSで以下のように記述します。

ul { padding:0; }

隙間がなくなるというよりは、点の部分が左側にはみ出すようになるので、さらに以下を追加。

li { margin-left:20px; }

margin-leftで点の部分がきちんと収まるように調節することで解決します。

また、行間を調整したいときはliにpaddingを設定します。

li { padding:3px; }

リストで左側の隙間をなくす

もしくは以下でも行間調節が可能です。

li { line-height:150%; }
Memo:

line-heightは%、px、 emなどの単位で指定できます。

line-heightを使う場合、私は個人的に分かりやすい%で指定することが多いです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP