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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

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

HTML

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

Q&A

解決済

1回答

3634閲覧

pタグ内に入れ子で挿入したsvgの改行を無くしたい

MsParrot

総合スコア4

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

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

HTML

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

0グッド

0クリップ

投稿2021/02/13 02:09

編集2021/02/13 05:06

以下のコードでpタグ内にsvgを挿入しましたが、スクリーンショットのように、svg(青いクエスチョンマーク)のみ改行されて表示されてしまいます。

イメージ説明

改行なしでクエスチョンマークを表示する方法はありますか?

html

1<p>万が一の事故の際にホストのみなさまをお守りするため、最大US$1,000,000の物損補償および最大US$1,000,000の賠償責任保険がAirbnbの全予約に自動付帯されます。<span><a href="#"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-label="host-insurance" role="img" focusable="false"style="display: block; height: 16px; width: 16px; fill: currentcolor;"><path d="m16 1c-8.271 0-15 6.729-15 15s6.729 15 15 15 15-6.729 15-15-6.729-15-15-15zm0 25a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm1.506-8.062-.006 2.066-3-.008.011-4.288 1.102-.301c1.295-.353 3.466-1.266 3.466-3.407 0-1.833-1.528-2.668-2.948-2.668-1.423 0-2.65.947-3.054 2.358l-2.884-.826c.776-2.711 3.162-4.532 5.938-4.532 3.391 0 5.948 2.437 5.948 5.668 0 2.653-1.687 4.814-4.573 5.938z"></path></svg></a><span></p> 2

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

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

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

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

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

guest

回答1

0

ベストアンサー

すみません一旦回答を取り下げます。

追記

まずspanに閉じタグがないのでそれを修正後、次のCSSを当てれば良さそうです。

CSS

1span { 2 display: inline-block; 3 vertical-align: text-bottom; 4}

投稿2021/02/13 02:17

編集2021/02/13 02:33
Masa-Shin

総合スコア269

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

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

MsParrot

2021/02/13 05:07

早速のご回答ありがとうございます。閉じタグの/を書き漏らしており失礼いたしました。上記のCSS試してみます。
MsParrot

2021/02/13 05:11

vertical-align: text-bottom で上下方向にズレが生じたのですが、text-topで全てが解決いたしました。本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問