Q&A
『拡大縮小』というのはブラウザのズームのことですか？
実現したいこと
拡大縮小したときの折り返し位置を変更したいです。
前提
拡大縮小した際に
0９：００ タイトルタイトルタイトル
タイトルタイトルタイトル
１０：００ タイトルタイトルタイトルタイトルタイトルタイトル
と、タイトルが長くなるとこのように
時間の下にきてしまいます。
１０：００
タイトルタイトルタイトルタイトルタイトルタイトル
これを、
10：00 （ここを揃えたい）タイトルタイトルタイトル
（ここを揃えたい）タイトルタイトルタイトル
折り返しするのがタイトル内で行頭は揃えたいのですが。
初心者ですがご教示ねがいますでしょうか。
.program_box li .title{
float:left;
padding: 2px 2px;
vertical-align: middle;
white-space:nowrap;
}
.program_box li.block{
display: block;
color:#666;
font-size:90%;
padding-top:10px;
}
html
<ul class="program_box marL10"> <li> <span class="time">09:00</span> <span class="title">タイトルタイトルタイトル <span class="marL20">タイトルタイトルタイトル</span></span> </li> <li> <span class="time">10：00</span> <span class="title">タイトルタイトルタイトルタイトルタイトルタイトル</span> </li> </ul>
回答2件
0
ベストアンサー
liにwhite-space: nowrap;を付けるli .timeのvertical-align: middle; float:left;を消すli .titleのfloat: left;を消すli .titleのvertical-align: middleをvertical-align: topに変更li .titleのwhite-space:nowrap;をwhite-space: normal;に変更li .titleにdisplay: inline-block;を追加
これでいかがでしょうか。
投稿2024/04/24 03:19
総合スコア20923
いただいた内容でできました！！ありがとうございます。
日付とタイトルのスペースを広くしたいのですが。。。もしこの内容で判れば教えていただけますでしょうか。
.time の padding-right や margin-right や width を増やすとか、.title の margin-left や padding-left を増やせばいいかと。
早速にありがとうございます。
解決できました。
たびたびすみません。ケータイで見たときに折り返しはできているのですが長い文章のお尻が切れてしまいます。。
あれ、上手くいかないですかー。
ではやっぱり flexible box にしたほうがよいかもしれませんね。
li に display:flex; align-content: first baseline;、white-space 削除、.time に flex: 0;, 全 float 削除、というかんじです。
本当に何度もすみません。お尻は折り返しでキレイに表示されたのですが、ケータイのみ長い文章のみ行頭が左にずれてしまい。。。頭が揃いません。これはケータイ表示用に変更しないといけないですかね。。難しそうでしたら大丈夫です。何度もありがとうございました。
具体的なコードとスクリーンショットを見ないと現段階では何とも言えないですね。この質問もごちゃごちゃしてきてるので、新しく質問を立てていただけたら見てみますよ。
とりあえずこれで様子見してみます。ありがとうございました。
0
フロートではなくてグリッドレイアウトにした方がいいかもしれません。
参考：
特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
投稿2024/04/24 03:28
総合スコア36134
あなたの回答
tips
プレビュー
