cssについて質問です。dt ddを横並びにして下線を引いています。

最後だけ下線を無くしたいのですが、何か良い方法はありますでしょうか?
(最後だけ別のスタイルを適用するのは無しでお願いします)
下記の方法でliでは出来ているようです。
http://www.webcreatorbox.com/sample-css-tips20/#demo17

【CSS】

dl.list dt {
float:left;
width:4em;
border-bottom:1px solid #999;
padding-bottom:0;
padding-right:0;
}

dl.list dd {
margin-left:4em;
border-bottom:1px solid #999;
}

【html】
<dl class="list">
<dt>項目1</dt>
<dd>AAAAAA</dd>
<dt>項目2</dt>
<dd>BBBBBB</dd>
<dt>項目3</dt>
<dd>CCCCCC</dd>
</dl>

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/08/12 10:55:17
  • 終了:2010/08/12 11:48:00

回答(1件)

id:yamaneroom No.1

yamaneroom回答回数1040ベストアンサー獲得回数612010/08/12 11:37:46

ポイント60pt

最後だけclass名またはid名を変える以外に方法はない

id:clab_yasu

すっきりしました。動的に書き出される部分だったので簡単に済む方法を知りたかったのですが、

要素数を数えて異なるクラスを設定するようにします。

2010/08/12 11:47:51
  • id:stnet
    >>
    dl.list {overflow:hidden;zoom:1;}
    dl.list dt {
    float:left;
    width:4em;
    margin-bottom:-1px;
    border-bottom:1px solid #999;
    padding-bottom:0;
    padding-right:0;
    }

    dl.list dd {
    margin-left:4em;
    margin-bottom:-1px;
    border-bottom:1px solid #999;
    }
    <<
    で出来ると思いますよ
    ちゃんと表示できてるかな?
  • id:clab_yasu
    コメントありがとうございます。
    教えていただいたコードも試してみたのですが、
    全ての要素で1px間隔が狭くなるだけでボーダーは残ったままでした。
  • id:stnet
    あれ
    こちらでは最下部の下線は消えて表示されていますけれどね
    ではborder-topになってしまいますが
    dl.list {overflow:hidden;}
    dl.list dt {
    width:4em;
    height:100px;
    margin:-1px 0 -101px 0;
    border-top:1px solid #999;
    }
    dl.list dd {
    padding:0 0 0 4em;
    border-top:1px solid #999;
    margin:0 0 1px 0;
    }
    ではどうでしょうか?
  • id:clab_yasu
    コメントありがとうございます。
    教えていただいたcssで希望通り消すことができました。
    助かりました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません