css - テキストの背景を持つ見出し

Question

見出しを作りたいのですが、こんな感じです

私は次のことを試しました：

HTML

<span class="header">Hallo</span><br /><span class="header">und Willkommen</span>       

CSS:

span.header {
    background: #404040;
    color: #fff;
    display: inline;
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
}

動作しますが、 と を使用せh1ずに 内で自動的に改行したいです。<span><br />

Answer 1

クラスでこの一連の属性を使用して、アラインメントの問題 (クロスブラウジングの問題も) を処理するのに役立てたいと思います。

.line_100{
    display:inline;
    float:left;
    height:auto;
    position:relative;
    text-align:left;
    width:100%
}

各フレーズに 1 つの完全な行を使用する必要</br>があり、.

Answer 2

なしで、<br>どのように行を分割する必要があるかを示していますか? または、「自動」と呼んでいるので、コードはどこを壊すかをどのように決定する必要がありますか? 使用したいHTML を提供していただくと、より適切な画像が得られる場合があります。

他のタグなしで単一の h1 を使用する場合、幅で分割する必要があると思います。

Answer 3

clear: both を使用して改行を作成できます<br/>

h1.header {
    background: #404040;
    color: #fff;
    display: inline;
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
    clear: both;
    float: left;
}

http://jsfiddle.net/S2m9n/1/