有没有办法在没有复杂设置的情况下将标签与CSS中的缺失值对齐？

Question

我将以下右对齐，并希望所有标签都排成一行，例如，如果缺少其他值。在下面的代码中我只有电话号码，当发生这种情况时，它看起来很糟糕。

<div style="text-align: right">
    	Phone: 555-555-5555<br/>
    	Cell: <br/>
    	Work: 
</div>

我如何能够很好地排列标签，以便在缺少值的情况下，它只是空白而不是我现在看到的？

Answer 1

这样的东西？

<div style="text-align: right">
  <div style="float:right;text-align:left">
    	Phone: 555-555-5555<br/>
    	Cell: <br/>
    	Work: 
  </div>
</div>

或者向右浮动父级，子级向左，但是您可能需要专门设置宽度

Answer 2

您可以使用float: right创建父div，在其中，您可以text-align: left您的div：

.parent{
float: right;
}

<div class="parent">
<div style="text-align: left">
    	Phone: 555-555-5555<br/>
    	Cell: <br/>
    	Work: 
</div>
</div>

Answer 3

你是这样的人吗？

＆＃13;

＆＃13;

.label {
       display: inline-block;
       width: 150px;
       text-align: right;
    }
    

＆＃13;

    <div>
        	<div><span class="label">Phone:</span> <span>555-555-5555</span></div>
        	<div><span class="label">Cell:</span></div>
        	<div><span class="label">Work:</span></div>
    </div>

＆＃13;

＆＃13;

＆＃13;