以下画像にて、「すべて見る ▶」を右寄せにしたいです。
aタグをdisplay: inline-block; にして、margin-left: auto; とmargin-right: 0; を指定しても動きませんでした。
text-align: right; と指定してもダメでした。
ご回答よろしくお願いいたします。
HTML
1 <div class="fourth"> 2 <div class="container"> 3 <h2 class="text_main">お知らせ</h2> 4 <div class="fourth_inner"> 5 <nav class="fourth_text_sub"> 6 <ul class="fourth_text_ul"> 7 <li class="fourth_text_li"><time>2020.12.22</time><span>休診情報</span><p>2021年1月の休診日は5日、17日、27日となります。</p></li> 8 <li class="fourth_text_li"><time>2020.12.11</time><span>イベント</span><p>当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</p></li> 9 <li class="fourth_text_li"><time>2020.12.01</time><span>採用</span><p>当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</p></li> 10 <li class="fourth_text_li"><time>2020.11.12</time><span>イベント</span><p>ホームページをリニューアルしました。</p></li> 11 </ul> 12 </nav> 13 <a href="#">すべて見る ▶</a> 14 </div> 15 </div> 16 </div>
CSS
1/* fourth */ 2.fourth { 3 padding-bottom: 112px; 4 text-align: center; 5 background-color: #F5FCF8; 6} 7 8.text_main { 9 margin-bottom: 73px; 10} 11 12.fourth_inner { 13 min-height: 390px; 14 background-color: #FFFFFF; 15 border-radius: 30px; 16 box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 17 padding-top: 51px; 18 padding-left: 66px; 19 padding-right: 66px; 20} 21 22.fourth_text_ul { 23 text-align: left; 24} 25 26.fourth_text_li:not(:nth-child(1)) { 27 padding-top: 21.5px; 28} 29 30.fourth_text_li { 31 padding-bottom: 20.5px; 32 border-bottom: 2px solid #E7E7E7; 33 display: flex; 34} 35 36.fourth_text_li time { 37 color: #21A937; 38 font-weight: bold; 39 margin-right: 34px; 40} 41 42.fourth_text_li span { 43 display: inline-block; 44 font-size: 12px; 45 color: #FFFFFF; 46 background-color: #444444; 47 font-weight: bold; 48 width: 80px; 49 height: 25px; 50 padding-top: 6px; 51 text-align: center; 52 margin-right: 30px; 53} 54 55.fourth_text_li p { 56 color: #444444; 57 font-weight: bold; 58} 59 60.fourth_inner a { 61 font-weight: bold; 62 display: inline-block; 63 margin-top: 41.5px; 64 margin-left: auto; 65 margin-right: 0; 66}

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。