定義リストに下線をつけたいと思っています。
(実際は、dt=日付、dd=お知らせ内容を記載するので、1行ごとの仕切りとして)
dt,ddの両方に下線をつけたところ、
・"compact"を入れると下線がdtとddの下線が重なり、破線が一部直線になる
・"float:left;"と幅指定をするとdtとddの間に2pxの隙間ができてしまう
という問題がおきます。
そこで、ddにのみ下線をつける方法で回避しようとしました。
が、下記の記述では”dtの前半分くらいに下線がつかない”という現象になります。
《CSS》
dt {
width: 70px;
margin-left: 5px;
padding: 5px 0 5px 0;
}
dd{
border-bottom:1px dotted #999 ;
padding: 5px 0 5px 70px;
}
《HTML》
<dl compact>
<dt><img src="./image/aaa.png">2010.9.1</dt><dd>*****</dd>
<dt><img src="./image/aaa.png">2010.9.2</dt><dd>****</dd>
<dt><img src="./image/aaa.png">2010.9.3</dt><dd>***</dd>
</dl>
どのようにすれば、きれいにdtの最初からddの最後まで下線がひけるでしょうか。
No.2ベストアンサー
- 回答日時:
実験してみただけですが…
dd要素はデフォルトでインデントされているので、その分が破線が引けていないのだと思われます。
ddに margin-left:0; を追加すれば、要素のインデントがなくなるので、破線はdlの左端からになります。
このため、現状よりもddの内容が左によりますので、paddingの値を再調整する必要があるかも。
margin-left:0 を追加したところ、内容が2行になってしまいましたので、
Paddingの調整をしました。
思い通りの表示ができました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- その他(プログラミング・Web制作) 物理の斜方投射の目盛り線とx軸、y軸の追加について 3 2023/05/26 21:11
- その他(プログラミング・Web制作) 物理の斜方投射で目盛りに数値を入れたい 2 2023/05/27 06:32
- その他(プログラミング・Web制作) Pythonにおける物理のシミュレーションでの単位変換について 2 2023/06/02 17:11
- 数学 dx/dt = |y| , dy/dt = x (-∞<t<∞) をとけ 1 2022/09/17 09:56
- その他(プログラミング・Web制作) ボールの動きがスムーズに動いてかつ目盛り線描画を維持するためには 4 2023/05/31 10:01
- 数学 dl と 、 Δl はどのように違いますか? 2 2022/11/30 15:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
ライトボックスでスクロールバー
-
safariだけ、cssが効きません!
-
コンボボックスの幅
-
z-indexで上になっている要素だ...
-
CSS/HTML で画像 2枚重ねた上に...
-
スタイルシート a:activeで画像...
-
htmlのボタンのサイズについて
-
吹き出し 下記の吹き出しのスタ...
-
FireFoxで見るとdiv間に隙間が...
-
Media Queries 4 で 非推奨とな...
-
divの中にspanを右寄せにするに...
-
テキストボックスの高さを可変...
-
入力フォームとセレクトボック...
-
form input テキストを上下中央...
-
1枚画像でリンクposition指定。...
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報