H1 タグの内部に 2行文章を入れたい

Question

お世話になっております。

件名の通りなのですが

<h1>美味しい羊羹　<span style="background-color: red">販売終了<br>
2018年4月まで</span></h1>

とすると

美味しい羊羹　　　【販売終了】
【2018年4月まで】

となってしまいます。

こちらを

美味しい羊羹　　　【販売終了】
　　　　　　　　【2018年4月まで】

としたいのですが
その場合spanを使用しないのでしょうか？
どのように表記するのが良いのでしょうか？

htmlが得意ではないため上記お問い合わせいたします。

お忙しいところ大変申し訳ないのですが
ご助力頂けますようよろしくお願い申し上げます。

Answer 1

<span>を使うのは正しいと思います
display:block;にして
2番目のspanのみ　text-align:right;にしてあげるといいんじゃないですか？

<h1 class="detail">
 <span>1行目</span><!--br は不要-->
 <span>2行目</span>
</h1>

h1.detail span{
  display:block;
　width:100%;
}
h1.detail span:nth-of-type(2){
  text-align:right;
}

別談になりますが、ｈ1の使い方を間違っていらっしゃる気がするんですが..
もう一度ご確認される事をお勧めします。

Answer 2

例えばこんな

h1>span{
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

Comments

[moitaro]

ありがとうございます。
こちらが一番簡単に実装出来そうでしたので
```css
h1.ct_ttl>span{
margin-top: 4px;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: red;
font-size: 3px;
line-height: 23px;
}
```
と実装しました。
ありがとうございます。

[defghi1977]

> こちらが一番簡単に実装出来そうでしたので
各プロパティの意味合いを理解した上でご利用下さい

Answer 3

よっ

サンプル : http://study.jeromedupuis.net/teratail/112693/

<style>
        h1 {
                font-size:16px;
        }
        .red {
                color:red;
        }
        .block {
                display:block;
        }
        .indent {
                text-indent: 40px;
        }
</style>

<h1>
        <span class="block">美味しい羊羹<span class="red">【販売終了】</span></span>
        <span class="block indent">【2018年4月まで】</span>
</h1>

:)

Answer 4

とりあえずレイアウトの修正のみならこれだけで

	h1 {
		padding-left: 3em;
		text-indent: -3em;
	}

HTMLの構成がきになるところですが、以下でも

	<h1>美味しい羊羹　<span class="h1-tag">販売終了</span><br>
		<span class="h1-tag">2018年4月まで</span></h1>

	.h1-tag {
		background-color: red;
	}