2013年11月29日

display:inline-block; CSS

スポンサード リンク

 display: inline-block; で指定要素を横並びにする
要素はブロック・ボックスを生成し、インライン・ボックスとしてレイアウトされる

  • HTML
  • CSS
  • JavaScript
スタイルを適用する前の、箇条書き リスト <ul> <li>要素
  • HTML
  • CSS
  • JavaScript

ロリポップ!のドメインは選べる全85種類!!
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display: inline-block;</title>
 <style type="text/css">
<!--
ul.inlineBlock li{
   display:inline-block;/* インラインブロック表示 */
   list-style: none; /* リストマーク非表示 */
   text-align: center; /* 文字 中央揃え */
   border: 1px solid green; /* ボーダー : 幅,線種,色 */
   background-color: #90ee90; /* 背景色 */
   padding: 2px 10px; /* 内側余白 上下,左右 */
   width: 100px; /* 横幅 */
    }
-->
</style>
</head>
  <body>
   <!--UL LI要素 リスト、箇条書き-->
  <ul class="inlineBlock">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ul>
</body>
</html>
display:inline-block

要素はインライン・ボックスとしてレイアウトされるブロック・ボックスを生成、
width, height, margin, padding の指定が可能になります。
つまりinline上に配置されたblock要素ということになります。

display: inline-block;と inline;の違い
display:inline-block;
  • HTML
  • CSS
  • JavaScript
display:inline;
  • HTML
  • CSS
  • JavaScript
display:block で表示
  • HTML
  • CSS
  • JavaScript
上記の水平リスト(UL LI要素)はdisplayの値にそれぞれinline-block; inline; を指定、それ以外は
width:100px; height:50px; margin:10px; padding: 5px 10px;と同じプロパティ値を
設定しています!! 共にインラインレベルで表示されています。
inline-block; width, height, margin, padding, すべて有効ですが
inline; width, height, 上下margin,が効いていません。
- inline-block  inline 
width ×
height ×
上下margin ×
左右margin
padding
display:inline-block をSPAN要素に指定
CSS
#sPn span{
 display: inline-block;
  text-align: center; 
  border: 1px solid green;
  background-color: lightyellow;
  width: 1.5em;
  line-height: 1.5em;
    }
HTML
<div id="sPn">
  <span>1</span>
  <span>2</span>
       ...
  <span>14</span>
  <span>15</span>
</div>
表示例
1 2 3 4 5 10 11 12 13 14 15
posted by javaScript at 23:58 | 大阪 ☔ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。