css - ヘッダーをテキストに揃える

Question

私は次のものを持っています：

http://jsfiddle.net/B8e8A/

これを実現するために、タグ内にwidth: 50%;a と aを含むヘッダーがあります。spanh2

ヘッダーバーが異なるサイズになるように、見出しがテキストに左揃えになるように作成しようとしていますが、バーは画面の左側に伸びます。これは可能ですか？

Answer 1

次のCSSを変更します。

変更点：削除された幅：50％

h2 {
    background: none repeat scroll 0 0 #FF8C00;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    display: inline-block;
    font-size: 150%;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 15px 30px 15px 0;
    /*--width:50%*/
}

変更点：右から左にフロート、右から左にテキストを揃え、nowrapを追加

h2 span {
    float: left;
    text-align: left;
    white-space: nowrap;
}

例： http： //jsfiddle.net/B8e8A/1/