テキストリンクの改行がうまく行きません。（DreamweaverCS3使用）

質問

例えば、
※　あいうえおかきくけこさしすせそ
とあって、これを一つのテキストリンクにしたいのですが、
幅の都合上、三分割にしないと収まりません。
それで、
　　あいうえお
※　かきくけこ
　　さしすせそ
という風に見た目は三分割されているけれど、
一つのテキストリンクとしてそろえたいのですが、
<br>等を使ったりして試行錯誤したのですが、
　　あいうえお
※かきくけこ
　さしすせそ
の様な形となってプレビューされます。（本当は※に「か」の文字が少し重なる）
　　あいうえお
※　かきくけこ
　　さしすせそ
という風に表示させる方法を教えて下さい。
出来れば、リンクのアンダーバーは文字の無い部分には表示させたくありません。
ちなみに、
<a href="">あいうえお</a>
<a href="">かきくけこ</a>
<a href="">さしすせそ</a>
も試したのですが、『※』印がそれぞれに表示されてしまいました。
※　あいうえお
※　かきくけこ
※　さしすせそ
といった様に。どうぞアドバイスをお願い致します。

回答No.2

tk-ojisan · ベストアンサー

なるほど。なんとなくですが、分かりました。
私だったらこうすると思います。

HTML部分
<p class="test">
<a href="">あいうえお<br>かきくけこ<br>さしすせそ</a>
</p>

CSS部分
.test{
background-image:url('○○○');
background-repeat:no-repeat;
background-position:0 15px; /* 画像の高さ設定は自由に変えてください */
padding:0 0 0 30px; /* 画像からの距離も自由に変えてください。 */
}

テストはしてませんが、多分これでうまく表示されるかと。

お礼

度々のアドバイスに感謝致します。
ありがとうございます。
試行錯誤アレコレ試したのですが、よく出来ませんでした。
すみません。
私が初心者過ぎるんだと思います。
ですので、かなり苦肉の策ですが、
リストマークの位置を若干ずらして文字とリストマークの被りを回避しました。
二段に分かれたテキストリンクの二段目の文字そろえに関しては、
結局、出来ずじまいです・・・。
勉強します。
本当にありがとうございました。

回答No.1

tk-ojisan

もし意図と違っていたらすみません。
以下ではダメなのですか？

<a href="">あいうえお<br>
かきくけこ<br>
さしすせそ</a>

どうしても※をかきくけこの前にいれたくて、しかも※にリンクをつけたくないのであればtableでわけてはどうでしょうか？

<table><tr>
<td style="vertical-align:middle;">※</td>
<td>
<a href="">あいうえお<br>
かきくけこ<br>
さしすせそ</a>
</td>
</tr></table>

お礼

早速のアドバイスをいただきましてありがとうございます。
すみません。言葉足らずでした。
※は<ul><li>でリストの画像マークを入れる設定をしています。
なので、改行した段階で自動的にリストマークが挿入されるようです。

<a href="">あいうえお<br>
かきくけこ<br>
さしすせそ</a>

としました場合、
そのリストマークにかきくけこの「か」が被り、

　　あいうえお
※かきくけこ
　さしすせそ（実際の画面表示では、※に「か」が重なる）

となってしまいました。
宜しくお願い致します。