コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest： css・定義リストのdtとddを同じ位置できれいな横並びにする［２］

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

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

（１）通常の定義リスト

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

  1. .dlwrap1 dl {
  2. 	width: 100%;
  3. 	color: #3366ff;
  4. 	font-size: 14px;
  5. 	margin: 4px 0;
  6. 	}
  7. .dlwrap1 dl dt {
  8. 	color: #777;
  9. 	font-weight: bold;	
  10. 	}

 

（３）table-cellを使った横並び

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

  1. .dlwrap dl     {
  2. 	display: table;
  3. 	color: #3366ff;
  4. 	font-size: 14px;
  5. 	margin: 4px 0;
  6. 	}
  7. .dlwrap dl dt  {
  8. 	display: table-cell;
  9.  	width: 10em;
  10. 	color: #777;
  11. 	font-weight: bold;
  12. 	}
  13. .dlwrap dl dd  {
  14.   	display: table-cell;
  15. 	}

 

（５）通常の定義リスト（inline）

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

  1. .dlwrap3 dl {
  2. 	display: table;
  3. 	color: #3366ff;
  4. 	font-size: 14px;
  5. 	margin: 4px 0;
  6. 	}
  7. .dlwrap3 dl dt	{
  8. 	color: #777;
  9. 	font-weight: bold;	
  10. 	display:inline;
  11. 	margin: 0;
  12. 	}
  13. .dlwrap3 dl dd	{
  14. 	display:inline;
  15. 	padding: 0;
  16. 	margin: 0;
  17. 	}
  18. .dlwrap3 dl dd:nth-child(2)	{
  19. 	padding-left: 20px;
  20. 	}

 

 

戻るボタン