Q&A
aタグにdisplay:inline-block;を設定していないのにwidthやheightを設定できました
親要素にdisplay:flex;を設定しているのが原因なのでしょうか 調べても情報が出てきませんでした
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>isara模写</title> 6 <link rel="stylesheet" href="css/isara.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 </head> 9<div class="contact-page"> 10 <p class="contact-p teian">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p> 11 <p class="marker contact-p">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p> 12 <a href="#">お問い合わせ＆資料請求はこちら</a> 13 <p class="contact-p simekiri">第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</p> 14 <p class="contact-p simekiri">第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</p> 15 <p class="contact-p simekiri">第8期生：2021年内に開催予定＊資料請求受付中です</p> 16 17 </div>
CSS
1@charset "UTF-8"; 2html{ 3 font-size:62.5%; 4} 5*,*::before,*::after{ 6 box-sizing:border-box; 7} 8body { 9 font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; 10 margin:0px; 11} 12h1,h2,h3,h4,h5,h6{margin:0px;} 13a{text-decoration:none;} 14.contact-page{height:600px; background-color:#EBB94D; display:flex; flex-direction:column; align-items:center; 15 padding-top:35px; text-align: center;} 16 .contact-p{font-weight:bold; font-size:1.3rem; color:white; line-height:1.5;} 17 .marker{background-color:white; color:#c7254e; display:inline-block; font-size:1.1rem; letter-spacing:2px; 18 border-radius:4px; margin-bottom:45px;} 19 .teian{margin-bottom:15px;} 20 .contact-page a{font-size:1.6rem; background-color:#d84940; opacity:0.8; color:white; 21 font-weight:bold; border-radius:45px; width:1030px; height:105px; line-height: 105px; margin-bottom:70px;} 22 .contact-page a:hover{opacity:1;} .simekiri{letter-spacing:2px; font-size:1.4rem; margin-bottom:35px;} 23
回答1件
0
ベストアンサー
フレックスアイテムのdisplay値は、自動的にブロック化されます。
If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified.
投稿2021/02/15 15:01
総合スコア21679
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/16 02:42