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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1296閲覧

widthが効かないのはなぜなのか

NDvP2OWLAoccEfQ

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/05/08 15:50

編集2020/05/08 15:52

最初の一番最初のno-btnクラスのみwidthが効きません。原因が分かりません。
first-of-allで試してみましたが、改善しませんでした。

ご回答いただければ幸いです。

html

1 <!-- news --> 2 <section class="news"> 3 <div class="news-inner"> 4 <h2 class="title">News</h2> 5 <ul> 6 <li> 7 <p class="date">2019-02-01</p> 8 <p class="no-btn">テキスト</p> <!-- 場所としてはここです。--> 9 <p class="sentence"> 10 ニュースニュースニュースニュースニュース 11 ニュースニュースニュースニュースニュース 12 ニュースニュースニュースニュース 13 </p> 14 </li> 15 <li> 16 <p class="date">2019-02-01</p> 17 <p class="no-btn">テキスト</p> 18 <p class="sentence"> 19 ニュースニュースニュースニュースニュースニュースニュース 20 </p> 21 </li> 22 <li> 23 <p class="date">2019-02-01</p> 24 <p class="no-btn">テキスト</p> 25 <p class="sentence"> 26 ニュースニュースニュースニュースニュースニュースニュース 27 </p> 28 </li> 29 </ul> 30 <a href="" class="btn">MORE</a> 31 </div> 32 </section> 33

scss

1// news 2.news { 3 padding: 130px 40px; 4 background-color: #F3F3F3; 5 .news-inner { 6 background-color: #fff; 7 padding: 56px 48px 40px; 8 max-width: 1080px; 9 margin: 0 auto; 10 box-shadow: 0 0 10px #949599; 11 ul { 12 li { 13 box-sizing: border-box; 14 display: flex; 15 align-items: center; 16 width: 100%; 17 border-top: 2px solid #F0F0F0; 18 padding: 30px 10px; 19 &:last-of-type { 20 border-bottom: 2px solid #F0F0F0; 21 } 22 .date { 23 font-size: 1.8rem; 24 white-space: nowrap; 25 width: 115px; 26 } 27 .no-btn { 28 font-size: 1.4rem; 29 margin-left: 50px; 30 width: 120px; 31 border: 2px solid #4973FF; 32 border-radius: 20px; 33 line-height: 26px; 34 text-align: center; 35 } 36 .sentence { 37 font-size: 1.8rem; 38 margin-left: 50px; 39 line-height: 1.7; 40 padding-right: 50px; 41 position: relative; 42 &::after { 43 position: absolute; 44 top: 50%; 45 right: 0; 46 transform: translateY(-50%) rotate(-45deg); 47 content: ""; 48 display: inline-block; 49 width: 17px; 50 height: 17px; 51 border-right: 3px solid #3E3E3E; 52 border-bottom: 3px solid #3E3E3E; 53 } 54 } 55 } 56 } 57 } 58}

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

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

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

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

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

m.ts10806

2020/05/08 23:28

SCSSだとパッと見た時に結局どのようなCSSとしてコンパイルされるか見えづらいので、 コンパイル後のCSSを提示された方が良いかと思います。(タグにもないのでSCSSをタグ登録している人には伝わらないですしね)
m.ts10806

2020/05/09 02:36

いずれかで質問編集されると思ってましたが、そういうことではないのでしょうか。
guest

回答1

0

ベストアンサー

横のテキストの幅に左右されているので、Buttonの横幅の120pxを死守したければ、widthをmin-widthにしましょう

投稿2020/05/08 16:23

okina

総合スコア471

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

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

NDvP2OWLAoccEfQ

2020/05/09 02:41

ありがとうございます。思うように動きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問