让第二个字贴在右边

Question

正如您在 fiddle 中看到的，我有一个列表，其中每个 child 都是这种形式：

A: B

如何让B坚持正确？我试过 float: right;，但没有用。如果我调整 padding-right: 1em; 会有一些改进，但值应该因设备而异。

CSS:

ul li {
    display: table-row;
}
ul li span {
    list-style-type: none;
    padding-left: 12px;
    display: table-cell;
    padding-right: 1em;
}
ul li span:after {
    content:'';
    position: absolute;
    display: block;
    width: 90%;
    margin-left: -12px;
}

有什么想法吗？

Answer 1

您可以将 ul li 和 ul li span 的类修改如下：

ul li {
    display: block;
    text-align: right;
}
ul li span {
    list-style-type: none;
    padding-left: 12px;
    display: inline;
    padding-right: 1em;
    float: left;
}

见下文：

.center_ol {
    text-align: center;
    list-style-position:inside;
}
ul li {
    display: block;
    text-align: right;
}
ul li span {
    list-style-type: none;
    padding-left: 12px;
    display: inline;
    padding-right: 1em;
    float: left;
}
ul li span:after {
    content:'';
    position: absolute;
    display: block;
    width: 90%;
    margin-left: -12px;
    /* compensate for padding-left: 12px; */
    border-bottom: dashed 2px #54687a;
}

<ul>
    <li><span>Name:</span>Charis Spiropoulos</li>
    <li><span>Birth:</span>10/02/1996</li>
    <li><span>Foot:</span>R</li>
</ul>

编辑：代码可以进一步简化为：

ul li {
    list-style-type: none;
    text-align: right;
}
ul li span {
    padding-left: 12px;
    float: left;
}

见下文：

.center_ol {
    text-align: center;
    list-style-position:inside;
}
ul li {
    list-style-type: none;
    text-align: right;
}
ul li span {
    padding-left: 12px;
    float: left;
}
ul li span:after {
    content:'';
    position: absolute;
    display: block;
    width: 90%;
    margin-left: -12px;
    /* compensate for padding-left: 12px; */
    border-bottom: dashed 2px #54687a;
}

<ul>
    <li><span>Name:</span>Charis Spiropoulos</li>
    <li><span>Birth:</span>10/02/1996</li>
    <li><span>Foot:</span>R</li>
</ul>

希望对您有所帮助！！！

让第二个字贴在右边

Make second word stick to the right

html

css

list

html-lists