html - 如何右对齐文本但仍保持向左缩进？

Question

我遇到了一个小的 CSS 问题。我想让双线文本右对齐，但它们应该在一行中。无论第一行中的文本增长多长，文本“Small”都应该跟随并在 Long 文本的左侧缩进。两者都应该向右对齐。

实际

预期

我的 js fiddle here

<div>
    <div id="blocker">
        ABCD
    </div>
    <div id="wrapper">
        <p id="inner">
          <h3>A very very long text</h3>
          <h3>Small</h3>
        </p>
    </div>
</div>

#blocker{
    background-color: green;
    float: left;
    width: 30%;
    height: 100px;
}
#wrapper{
    text-align: right;
    background: grey;
    height: 100px;
}
#inner{
    text-align: left;
}

Answer 1

只需在您的 css 和 html 中进行这些更改:

CSS:

#inner{
    display: inline-block;
    float: right;
    text-align: left;
}

HTML:

<div id="inner">
      <h3>A very very long text</h3>
      <h3>Small</h3>
    </div>

演示:http://jsfiddle.net/ykmupf1r/6/