質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2763閲覧

html ul li 行が増えた時の対応

may88seiji

総合スコア79

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/13 02:45

###前提
html css で日付 文章を組みました。
こちらの画像のように表示されてます。
参考画像

###実現したいこと
現在、デザイン通りに組めているんですが、
テキストが2行目に増えた時に下のテキストと重なってしまいます。
テキストの分量に応じて他のテキストと重ならないようにhtmlを組むにはどうしたらよいでしょうか。
よろしくお願いします。

###該当のソースコード

css

1 2.right{ 3 margin-bottom: 100px; 4} 5.date{ 6 color: #00cdff; 7 margin-left: 22px; 8 margin-bottom: 14px; 9 position: relative; 10} 11.date_first{ 12 padding-top: 24px; 13} 14.home_info{ 15 position: absolute; 16 left: 116px; 17 width: 545px; 18} 19.table_right img{ 20 margin-left: 5px; 21} 22.news{ 23 width: 786px; 24 height: 160px; 25 background-color: #f2f2f2; 26 box-shadow: 0 0 0 5px #dedede inset; 27 margin-left: 180px; 28}

html

1<div class="right"> 2 <div class="title_right"><p>ホーム</p></div> 3 <ul class="table_right news"> 4 <li> 5 <div ><p class="date_first"><span class="date">2016/6/28</span><span class="home_info">登録キャンペーンを開始いたしました。</span></p></div> 6 </li> 7 <li> 8 <div><p><span class="date">2016/6/25</span><span class="home_info">新機能が追加されました。</span></p></div> 9 </li> 10 <li> 11 <p><span class="date">2016/6/1</span><span class="home_info">おすすめな宿が追加されました。</span></p> 12 </li> 13 <li> 14 <p><span class="date">2016/5/25</span><span class="home_info">新機能が追加されました。</span></p> 15 </li> 16 <li> 17 <p><span class="date">2016/4/20</span><span class="home_info">おすすめな宿が追加されました。</span></p> 18 </li> 19 </ul> 20 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

改行の際に文字がかぶってしまうのは.home_infoをposition:absoluteで固定してしまっているからなので、floatとoverflow:hiddenで高さを可変にするのがベターな選択かと思います。
また、可変にすると外を囲っている.newsの高さ固定によりulがあふれてしまうので、heightを外すか、min-heightで設定するとよいです。

それを踏まえてCSSを修正するとこんな感じになります。

CSS

1<style> 2.right{ 3 margin-bottom: 100px; 4} 5.date{ 6 color: #00cdff; 7 margin-left: 22px; 8 margin-bottom: 14px; 9 position: relative; 10width:100px; 11float:left; 12} 13.date_first{ 14 padding-top: 24px; 15} 16.home_info{ 17/* position: absolute;*/ 18/* left: 116px;*/ 19 width: 545px; 20float:left; 21} 22.table_right img{ 23 margin-left: 5px; 24} 25.news{ 26 width: 786px; 27/* height: 160px;*/ 28min-height:160px; 29 background-color: #f2f2f2; 30 box-shadow: 0 0 0 5px #dedede inset; 31 margin-left: 180px; 32} 33.news li{ 34 overflow: hidden; 35} 36</style>

投稿2016/09/13 04:10

編集2016/09/13 04:27
kitori_jp

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/09/13 05:34

原因から理由とわかりやすい説明、ありがとうございます。 無事に対応できました。
guest

0

.news p { display: table; width: 100%; } .news span { display: table-cell; vertical-align: top; } .news span:first-child { width: 6em; }

いったんスタイルをこれだけにしてみてください。
positionを使うのではなく、spanを横並びにするだけです。

投稿2016/09/13 04:00

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/09/13 05:36

回答ありがとうございます!postionを使わないのがポイントなんですね。参考になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問