Question

我在下面的HTML和CSS中，span左对齐。此处padding-right根据span文字大小而有所不同。有没有一种方法可以在缩进中使用独立于span文本大小的同一行。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

由于

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/

将跨度与相等的填充对齐

2 个答案: