コニファ・ロゴ

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要素内容]ダミーテキスト

  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. }

 

(3)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. }

 

(5)通常の定義リスト(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. }

 

 

戻るボタン