.a {
position: relative;
width: 100px;
height: 40px;
background: red;
}<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>あなたはより良いあなたに合うようにそれを設定することができますよう、vertical-alignとともにdisplay:inline-blockを使用しています。コメントのユーザーへ
：spanはdivとの兄弟ないその親であるため、
これは、有効なHTMLです。
.a {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 40px;
background: red;
}<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>はなぜフィドルで同じ結果を得ていないのです）関与していましたか？ https://jsfiddle.net/o1xvw91a/4/（divは完全左、テキストは右）私はそれがテキスト自体の一部のようになりたいので、同じ行の言葉で流れる、正確にいくつかのテキストの単語のように振る舞います。私がうまく説明できない場合は申し訳ありません。これは壊し答えであるが、今私はあなたを理解 – Toniq
@Toniqは、更新答え – dippas
を見てみましょう - OPに、私は強く「」それは、その後、CSSで.Aとして参照されるのdivのクラスを持つに対してお勧めします。実際の "a"要素で迷子になるのは簡単すぎます。意図せぬものをターゲットにしてしまいます。この答えの誤りではなく、むしろOPの質問ですが、私はこの答えが受け入れられたのでここでは価値があると思いました。しかし、それとは別に - 感謝@gavgrif素晴らしい答え – gavgrif
[ '表示：インラインblock']（https://jsfiddle.net/websiter/o1xvw91a/3/）はあなたの友達です。あなたのコードに –
、divはスパンでなければなりません。あなたのスパン親は、p、divの可能性があり、... –
'div'は**' span'内側にある、それは意味論 – vsync