どんなふうに調べたり、どんなサイトを参考にしたかなども記載していただくことは可能でしょうか？
左右外側に配置する方法もいろいろあって、調べたら様々な情報が出てくると思います。
試したことや、調べてわからなかったことなども載せていただけるとありがたいです。
2Like
html css文字を別行で左右に配置したい。
解決したいこと
html cssでウェブサイトを作成しているのですが、文字の左右配置の方法で詰まってしまっています。
現状
理想
該当箇所
.html
<div class="newsArea">
<div class="verticalWrite">
<h2>お知らせ</h2>
</div>
<div class="threadList">
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
<div class="threadItem">
<a href="">
<p class="dateParagraph">2024.01.01</p>
<p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
</a>
</div>
</div>
</div>
.css
.newsArea{
height: auto;
display: flex;
margin: 0 0 80px 0;
}
.threadList{
width: 80%;
float: right;
margin: 0 0 0 auto;
}
.threadItem {
min-height: 100px;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
display: flex;
align-items: center;
}
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。
0
4Answer
Comments
@Kobayashi0620
Questioner失礼しました。
下記内容が調べたこと、試したことになります。
「ヘッダーメニュー 横並び」などで調べてflexを使用したら両端に表示できるということはわかったのですが、それだと行が同一になってしまうという欠点があり断念、、
次に「https://blog.codecamp.jp/programming-html-text-align」左記の記事を参考に`text-align`での調節を試みたのですが、
両端に表示されずつまずいてしまっています。
現状調べて詰まっている個所はこのような状態になります。
きれいに記載できる方法がありましたら教えていただけますと幸いです。回答ありがとうございます。
非常に惜しいところまで来てるように思います。
日付がその位置で止まっているのは、その親要素の右端がその位置にあるからです。
親要素の幅を工夫すればやりたいことは達成できると思います。本題と外れますが、日付までaタグで囲っているのは問題ないでしょうか？
左右別々に配置しているのに、1つのリンクになっているのが少し気になりました。@Kobayashi0620
Questionerfloat: right;も試したのですが、
@Kobayashi0620
Questionerありがとうございます
そちらで試してみます。
スレッド単位でリンク化したかったので日付までaタグ範囲内に入れています！！@Kobayashi0620
Questioner下記内容で修正を行ったのですが、
このようになってしまいます。大本を80%で設定しているため、日付の親要素をpx数での指定を行いたくないのですが、その場合何か良い方法はありますでしょうか？
.threadList{ width: 80%; float: right; margin: 0 0 0 auto; } .threadItem { min-height: 100px; border-top: solid 1px #333; border-bottom: solid 1px #333; display: flex; align-items: center; } .threadItem .dateParagraph{ width: 100%; text-align: right; } .threadItem .mediumParagraph{ text-align: left; }パーセントを使ってあげればいいと思います。
パーセントは親要素に対する割合になります。日付を右端にしたいということなので、親要素のaタグが画面右端までになるように
width:100%と指定すればいい感じになると思います。
justify-contentをうまく使えば解決できるかと思います
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
threadItemに対して
justify-content: space-between;
flexDirection: row;
を設定してはどうでしょうか？
またthreadListのfloatは不要な気がします。
threadListにも
display: flex;
flexDirection: column;
justify-content: start;
とかで上手くいく気がします。
手元で試したわけではないので間違えてたら申し訳ありません。
0Like
I tried to fix it, you can see the results in the codepen below:
https://codepen.io/ranggakcs/pen/MWMgagg
0Like
.dateParagraph{
text-align:right;
}
.threadItem {
min-height: 100px;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
align-items: center;
}
0Like