Question

正如您在fiddle中所看到的，我有一个列表，每个孩子都有这种形式：

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

希望这有帮助!!!

将第二个单词贴在右边

1 个答案: