對齊等於填充的跨度

Question

我有下面的HTML和CSS，這裏span對齊到左邊。這裏的padding-right根據span文字大小而變化。有沒有一種方法可以在縮進中獨立於span文本大小的同一行。

.chapter { 
 
    margin-left: 5.0em; 
 
    margin-right: 0.2em; 
 
} 
 
.para { 
 
    text-indent: 0em; 
 
    margin-top: 0.85em; 
 
} 
 
.para span.phrase { 
 
    text-indent: 0em; 
 
    margin-left: -4.75em; 
 
    font-weight: bold; 
 
    padding-right: 2.8em; 
 
}

<div class="chapter"> 
 
    <div class="para"> 
 
<span class="phrase">8.04</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
    <div class="para"><span class="phrase">8A.03</span> 
 
The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
    <div class="para"><span class="phrase">8AA.01</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
</div>

感謝

Answer 1

只需添加position:absolute;您.para span.phrase

JSFiddle

Answer 2

你需要有一個表格佈局，能夠實現您的熱曲美東時間。不要使用真實的<table>，您可以使用display table屬性。

基本上你需要使用一個display: table;的每一行，一個display: table-row;每列（<span>）將是一個display: table-cell;。

現在，您的文本可以是動態的，不需要硬編碼CSS中第一列的大小。

一個例子可以在這裏找到：http://jsfiddle.net/r5a1sqzd/1/