引越しでおトクなインターネット回線は?>>

HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、
liの
list-style-image: url("test.gif");
がDL DT DDで表現できません。

違った方法で表示できるのでしょうか?

それとも不可能なのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (5件)

できると思いますよ。


その場合、line-heightを消して画像の高さを一緒にしてやる方が良いかも知れません。
    • good
    • 0

<style type="text/css">


dt {
float:left;
}
dd {
line-height:100px; /* 画像の高さ */
}
</style>

<dl>
<dt><img src="" alt=""></dt>
<dd>テキスト</dd>
</dl>

こんな感じですか?
dl要素の特性上、imgにaltは必須になると思いますが。

この回答への補足

ご解答ありがとうございます。

表示させたいデザインは、


Liタグでいうと、
・テキスト1
・テキスト2
・テキスト3

・の代わりが[画像]
テキスト1の代わりが[画像1]
になるので、

[画像][テキスト1]
[画像][テキスト2]
[画像][テキスト3]
ではなく
[画像][画像1]
[画像][画像2]
[画像][画像3]
というかたちにしたいのですが、可能でしょうか?

補足日時:2008/05/26 09:33
    • good
    • 0

何に使用するのかは別として、


例えば、

<dl>
<dt>日付</dt><dd>更新内容</dd>
<dt>日付</dt><dd>更新内容</dd>
</dl>

というような使い方をすると仮定して、

dt{
background: url("image/list.gif") 0% 0%;
padding: 0 0 0 20px;
}

といった感じにbackgroundで位置指定をすれば代用可能ですが、
ブラウザごとの挙動などを確認する必要はあると思います。
    • good
    • 0

ULとDLだと構造上、まったく用途が違いますね


意味の定義ではないならDLを使うのはNGです。
    • good
    • 0

理由は単純で


dt あるいは dd が display:list-item になってないから。



じゃないの?
list-style-imageが使用可能な条件をよく確認したらどうかな
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む


人気Q&Aランキング

おすすめ情報