【css】list横並び設定で縦位置を指定する【リスト】 HTML 知識Z(ゼータ)

トップページHTML >【css】list横並び設定で縦位置を指定する【リスト】

【css】list横並び設定で縦位置を指定する【リスト】

Date:2010/01/05
Category: HTML


リストを使って横並びのグローバルメニューを作るときなどに有効なcssの設定方法です。

<li>で横並びにする方法は、float:leftを設定したり、display:inlineを設定したりする方法がありますが、いずれもvertical-align:middleは有効になりません。そこで、

div#gmenu li{ list-style-type: none; display:block; float: left; padding: 0; width: 87px; height: 40px; text-align: center; vertical-align: middle; line-height: 45px; }
このように、「line-height: 高さ指定」とすることで、任意に上からの高さを指定できます。
二行になるときは、<li class="second">などとして、line-height:の値を変えてあげれば上手に指定することができます。


【css】list横並び設定で縦位置を指定する【リスト】 の関連記事

No related items.

コメント

No comments yet

コメントする




次項 フォームに入力した内容が文字化けする
前項 【CSS】画像を透過させる方法【filter,-moz-opacity,opacity】

知識Z(ゼータ)トップへ
モッピー | お金がたまるポイントサイト
About Us

知識Z(ゼータ)は違法性のあるコンテンツ、不適切な表現の含まれるコンテンツを一切を排除した安心安全な総合優良コンテンツサイトを目指しています。細心の注意を払っておりますが、万が一、不適切なコンテンツ等がございましたら、ご一報ください。ご意見・ご連絡

当サイトは、月額1,050円で高機能・安心レンタルサーバーの【XSERVER(エックスサーバー) 】にて運営させていただいております。いつも大変ありがとうございます。

Calendar
<   2010-01   >
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Amazon.co.jp
What's New
タグ
オンラインデータ
訪問者数:0 人
投稿記事数:283 件
09644294