横にリンク先を3つ並べたいのです

締切済

質問者：LHS07
質問日時：2022/04/06 21:10
回答数：3件

横にリンク先を3つ並べたいのです
どのようにしたらいいのでしょうか

　左　　　　　中央　　　　　　右
3月10日　　　　3月25日　　　　4月3日

左　3月10日　は　どちらも同じところに飛ばしたいです。

中央　3月25日　も　どちらも同じところに飛ばしたいです。

右　4月3日　も　　どちらも同じところに飛ばしたいです。

更にこの下側に別に
横3つ　で　縦2つ　で配置させたいです。

　 B左　　　　 B中央　　　　 B右
3月10日　　　　3月25日　　　　4月3日

　 C左　　　　 C中央　　　　 c右
3月10日　　　　3月25日　　　　4月3日

上下で縦は　きれいに見えるように　一定間隔でそろえたいです。

以上にてよろしくお願いします。

html　はノートパッドで作成したいです。

補足日時：2022/04/06 21:17
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

参考程度に

No.3

回答者： fujillin
回答日時：2022/04/07 15:18

No2です

＞しかしこれでは　左　中央　右の文字が表示されません。
＞左の下に3月10日を表示させたいです。
＞　　左
＞3月10日
「左」、「中央」・・ってのは、てっきり説明用の文章だと思いました。
とは言え、表示する文字だけの話のようですから、文字の内容だけを変更すれば済む話ではないのでしょうか？？

　<a href="#1">左<br />3月10日</a>

とか。

わかりやすさのために、リンク要素に色を付けておいたので、それを見ればリンク要素がブロック状になっていることはわかると思うのですが・・

もともとHTML構成のご提示もない質問でしたので、No2はレイアウトの方法を例として紹介したものです。
HTMLや文章の内容に関しては質問者様にしかわからないので、それに合わせて応用してください。
もしも、もっと複雑な内容構成なら、<div><a>という構成にするよりも、<ul><li>等による構成の方が良いのかも知れませんね。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

通報する

お礼日時：2022/04/08 21:19

参考程度に

No.2

回答者： fujillin
回答日時：2022/04/06 22:28

こんばんは

なさりたいことが正確にはわかりませんが・・・

手っ取り早いのはテーブルでレイアウトしてしまうことかな？

とは言え、昨今はテーブルレイアウトは推奨されないので、以下ではいかがでしょうか？
※ 列幅は均等3分割で良いものと解釈
※ ご質問文にない部分は適当に設定
※ レイアウトの状態がわかりやすいように、リンク要素には背景色を付けてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#hoge{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto);
gap: 5px;
}
#hoge a{
text-align: center;
background-color: #AEC;
}
</style>
</head>
<body>
<div id="hoge">
<a href="#1">3月10日</a>
<a href="#1">3月25日</a>
<a href="#1">4月3日</a>
<a href="#2">3月10日</a>
<a href="#2">3月25日</a>
<a href="#2">4月3日</a>
<a href="#3">3月10日</a>
<a href="#3">3月25日</a>
<a href="#3">4月3日</a>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。
しかしこれでは　左　中央　右の文字が表示されません。
左の下に3月10日を表示させたいです。

　　左
3月10日

です。
この2行をクリックすると
wordをダウンロードさせたいです。
<a href="11-.docx">左</a>
<a href="11-.docx">3月10日</a>

飛ぶという表言は適切ではなかったです。

通報する

お礼日時：2022/04/07 08:30