将标题与文本对齐

Question

我有以下内容：

http://jsfiddle.net/B8e8A/

我在width: 50%;标记中包含span和h2标题，以帮助我实现此目标。

我希望这样做，使标题与文本保持对齐，这样标题栏的大小会有所不同，但条形图仍会延伸到屏幕的左侧。这可能吗？

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/