如何正确对齐文本但仍保持向左缩进？

Question

我正在运行一个小的CSS问题。我希望右对齐的双列文本，但它们应该在一行中。无论第一行中的文本有多长，文本＆＃34; Small＆＃34;应该跟随并用Long文本向左缩进。两者都应该与右边对齐。

实际

预期

我的小提琴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/

Answer 2

您需要在右侧部分的文本周围放置一个包含div，如下所示;

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

并添加如下的样式;

.txt {
    float: right;
    text-align: left;
    width: auto;
}

Answer 3

将<h3>置于<p>内是没有逻辑上的理由的。这与你可以得到的非语义一样。您应该使用最适合您内容的标签。如果您没有任何标头，请不要使用任何标头标签。只是不要在段落中放置标题。

<强> Demo

CSS

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

HTML

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

Answer 4

试试这个：

HTML

<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>

CSS

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

#wrapper > h3{ text-align:left}

你也可以添加一个新的div来表示margin-left