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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1617閲覧

aタグを右寄せしたい

maru_1997

総合スコア58

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/03/08 08:00

以下画像にて、「すべて見る ▶」を右寄せにしたいです。
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}

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

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

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

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

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

guest

回答1

0

ベストアンサー

navへの影響がないなら

CSS

1.fourth_inner { 2 text-align:right; 3}

投稿2022/03/08 08:26

yambejp

総合スコア117624

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.31%

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

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

質問する

関連した質問