コニファ・ロゴ

csstest: css・定義リストのdtとddを同じ位置できれいな横並びにする[2]

css・定義リストのdtとddを同じ位置できれいな横並びにする[1]」の補足ページです。

[1]では、dtとddを同じ位置に横並びにするために「table-cell」を使ったサンプルを載せました。下の(3)がそれと同じサンプルです。これと同じような動きを「display:inline」を使って作成してみました。

(1)通常の定義リスト

2014年05月07日
[dd1要素内容]ダミーテキスト
2014年04月18日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
2014年04月03日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
[dd3要素内容]ダミーテキスト

.dlwrap1 dl {
	width: 100%;
	color: #3366ff;
	font-size: 14px;
	margin: 4px 0;
	}
.dlwrap1 dl dt {
	color: #777;
	font-weight: bold;	
	}

 

(3)table-cellを使った横並び

2014年05月07日
[dd1要素内容]ダミーテキスト
2014年04月18日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
2014年04月03日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
[dd3要素内容]ダミーテキスト

.dlwrap dl     {
	display: table;
	color: #3366ff;
	font-size: 14px;
	margin: 4px 0;
	}
.dlwrap dl dt  {
	display: table-cell;
 	width: 10em;
	color: #777;
	font-weight: bold;
	}
.dlwrap dl dd  {
  	display: table-cell;
	}

 

(5)通常の定義リスト(inline)

2014年05月07日
[dd1要素内容]ダミーテキスト
2014年04月18日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
2014年04月03日
[dd1要素内容]ダミーテキスト
[dd2要素内容]ダミーテキスト
[dd3要素内容]ダミーテキスト

.dlwrap3 dl {
	display: table;
	color: #3366ff;
	font-size: 14px;
	margin: 4px 0;
	}
.dlwrap3 dl dt	{
	color: #777;
	font-weight: bold;	
	display:inline;
	margin: 0;
	}
.dlwrap3 dl dd	{
	display:inline;
	padding: 0;
	margin: 0;
	}
.dlwrap3 dl dd:nth-child(2)	{
	padding-left: 20px;
	}

 

 

戻るボタン