例えば、
※ あいうえおかきくけこさしすせそ
とあって、これを一つのテキストリンクにしたいのですが、
幅の都合上、三分割にしないと収まりません。
それで、
あいうえお
※ かきくけこ
さしすせそ
という風に見た目は三分割されているけれど、
一つのテキストリンクとしてそろえたいのですが、
<br>等を使ったりして試行錯誤したのですが、
あいうえお
※かきくけこ
さしすせそ
の様な形となってプレビューされます。(本当は※に「か」の文字が少し重なる)
あいうえお
※ かきくけこ
さしすせそ
という風に表示させる方法を教えて下さい。
出来れば、リンクのアンダーバーは文字の無い部分には表示させたくありません。
ちなみに、
<a href="">あいうえお</a>
<a href="">かきくけこ</a>
<a href="">さしすせそ</a>
も試したのですが、『※』印がそれぞれに表示されてしまいました。
※ あいうえお
※ かきくけこ
※ さしすせそ
といった様に。どうぞアドバイスをお願い致します。
No.1
- 回答日時:
もし意図と違っていたらすみません。
以下ではダメなのですか?
<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>
としました場合、
そのリストマークにかきくけこの「か」が被り、
あいうえお
※かきくけこ
さしすせそ(実際の画面表示では、※に「か」が重なる)
となってしまいました。
宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
なるほど。
なんとなくですが、分かりました。私だったらこうすると思います。
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; /* 画像からの距離も自由に変えてください。 */
}
テストはしてませんが、多分これでうまく表示されるかと。
度々のアドバイスに感謝致します。
ありがとうございます。
試行錯誤アレコレ試したのですが、よく出来ませんでした。
すみません。
私が初心者過ぎるんだと思います。
ですので、かなり苦肉の策ですが、
リストマークの位置を若干ずらして文字とリストマークの被りを回避しました。
二段に分かれたテキストリンクの二段目の文字そろえに関しては、
結局、出来ずじまいです・・・。
勉強します。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(プログラミング・Web制作) プログラミング pythonの問題について 2 2022/04/19 00:41
- Excel(エクセル) Excel VBAで、行の高さを、上下1文字分程度高くしたい 3 2023/04/23 00:17
- PHP PHP一覧表示した項目にリンクをはりたい 1 2023/07/12 17:08
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 10:07
- Excel(エクセル) Excelで数式をそのままコピーしたい どうすればいいですか? 4 2022/09/16 02:16
- Excel(エクセル) エクセルに代わる 表入力ツールについて 3 2022/12/21 21:19
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
Firefoxを使ってるのですがズー...
-
同じクラス名はつけないほうが...
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
リストの記号を括弧付きの文字...
-
テーブルのセル内の隙間を取れ...
-
Visual Studio で CLR 開発でデ...
-
Tableタグ内のspan styleが適応...
-
formのinputなどの幅100%指定
-
td要素内のdiv要素をセンタリン...
-
htmlで画像の上にテキストを表...
-
HTMLのテーブルでそれぞれの大...
-
HPに載せる写真にかっこいい...
-
ブラウザの文字サイズを変える...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
TABLEのセルの中の文字を行単位...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報