Q&A
（※幅680pxで撮影したものです）
下記のように、それぞれ時刻をblock要素、タイトルとボタンをinline-block要素にして、
時刻の部分で改行され、タイトルとボタンについては改行されないようにしようとしています。
しかし、幅を狭めると改行してしまいます。
幅を狭めても、タイトルとボタンが改行されなくする方法を教えてください。
&-time { //時刻をblock要素にする display: block; } &-ttl { //タイトルをinline-block要素にする display: inline-block; } &-btn { //ボタンをinline-block要素にする display: inline-block; }
ソースは下記の通りです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/news-pagenation.css"> </head> <body> <section class="more section"> <h3 class="section__ttl">More</h3> <div class="more__inner inner"> <ul class="more__list"> <li class="more__item"> <time class="more__item-time" datetime="2019-01-30">2019-01-30</time> <p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</p> <a href="" class="more__item-btn">more...</a> </li> <li class="more__item"> <time class="more__item-time" datetime="2019-01-30">2019-01-30</time> <p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</p> <a href="" class="more__item-btn">more...</a> </li> <li class="more__item"> <time class="more__item-time" datetime="2019-01-30">2019-01-30</time> <p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</p> <a href="" class="more__item-btn">more...</a> </li> <li class="more__item"> <time class="more__item-time" datetime="2019-01-30">2019-01-30</time> <p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</p> <a href="" class="more__item-btn">more...</a> </li> <li class="more__item"> <time class="more__item-time" datetime="2019-01-30">2019-01-30</time> <p class="more__item-ttl">ニュース</p> <a href="" class="more__item-btn">more...</a> </li> </ul> </div> </section> </body> </html>
//----------------------------------------------------- // 共通 //----------------------------------------------------- html { font-size: 62.5%; } body { font-size: 1.4rem; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; background-color: white; color: #333333; } li { list-style: none; } a { text-decoration: none; } .wrapper { overflow: hidden; } .inner { margin: 0 auto; max-width: 100%; padding: 0 15px; width: $w-pc; @include pc { padding: 0; } } //----------------------------------------------------- // More //----------------------------------------------------- .more { font-size: 1.6rem; &__inner { width: 838px; margin: 0 auto; } &__item { padding: 22.5px 9.5px 21.5px 7.5px; &:first-child { padding-top: 0px; } &+& { border-top: 1px solid #333333; } &-time { margin-right: 24px; //時刻をblock要素にする display: block; } &-ttl { //タイトルをinline-block要素にする display: inline-block; margin-right: 36px; } &-btn { width: 100px; padding: 0 24px; height: 30px; line-height: 30px; color: #ffffff; text-align: center; background-color: #3f51b5; //ボタンをinline-block要素にする display: inline-block; } } }
回答1件
0
ベストアンサー
下のように.more__item-ttlの中に.more__item-btnを入れてみるのはどうでしょうか・・
html
1<p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース<a href="" class="more__item-btn">more...</a></p>
どうしても.more__item-ttlと.more__item-btnを分けたいということでしたら、包括する要素で囲って
それに対してwhite-space: nowrap;を適用すると改行されなくなります。
ただその場合、幅を狭めても改行しないので、テキストの量が増えると横にはみ出てスクロールバーが出てしまうと思います。
html
1<div class="more__item-inner"> 2 <p class="more__item-ttl">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</p> 3 <a href="" class="more__item-btn">more...</a> 4</div>
css
1.more__item-inner { 2 white-space: nowrap; 3}
投稿2019/10/01 18:48
総合スコア484
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/02 02:01