Question

我已经玩了一段时间来获取一个列表，让主列表文本在内容列中与＃34; +＆＃34;在同一条线上右对齐的标志。我在firefox中完美地工作，只是发现长于一行的行（因此会有一个省略号溢出）正在包裹＆＃34; +＆＃34;登录IE和Chrome。

我从项目中提取的示例位于https://jsfiddle.net/qo65Lg2n/2/。由于这是一个提取，因此类别编号之类的内容并未正确显示。

有没有其他方法可以解决这个问题，这种方式适用于所有三种主流浏览器？

由于

HTML：

<div style="width: 1000px; text-align: center; margin: auto">
<div class="sfexpandableListWrp">
    <ol class="sflistList">
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                this is a short list title
            </a>
        </li>
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                this is a really really really really really really really really really really really really really really long list title
            </a>
        </li>
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                something
            </a>
        </li>
    </ol>
</div>
</div>

的CSS：

.sfexpandableListWrp
{
    max-width: 500px;
    text-align: left;
}

.sfexpandableListWrp .sflistList
{
    margin-bottom: 23px;
    list-style-type: none;
}

.sfexpandableListWrp .sflistItemTitle
{
    font-size: 1em;
    font-weight: bold;
    float: left;
    width: 100%;
    background-color: #1BB2A0;
    border-radius: 8px;
    line-height: 3.7em;
    margin-bottom: 1em;
}
/* List item toggle link */
.sfexpandableListWrp .sflistItemToggleLnk
{
    padding-left: 15px;
    color: white;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 4em;
}
.sfexpandableListWrp .sflistItemToggleLnk::before
{
    content: "Category " counter(category-counter) ": ";
    color: black;
    font-family: "VAGRoundedBT-Regular";
    counter-increment: category-counter;
}
.sfexpandableListWrp .sflistItemToggleLnk::after
{
    content: "+";
    color: white;
    float: right;
    clear: right;
    font-size: 2em;
    background-color: #88CEB4;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0 0.5em;
    margin-right: -2em;
}

Answer 1

使用绝对位置可以帮助你。

首先，将:: after元素更改为position：absolute并删除margin-right，float属性

.sfexpandableListWrp .sflistItemToggleLnk::after
{
    position:absolute;
    top:0;
    right:0;
    content: "+";
    color: white;
    font-family: "VAGRoundedBT-Regular";
    font-size: 2em;
    background-color: #88CEB4;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0 0.5em;
}

第二个添加位置：相对于父.sflistItemToggleLnk

.sfexpandableListWrp .sflistItemToggleLnk {
    padding-left: 15px;
    color: white;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 4em;
    position:relative;
}

我希望这就是你想要的

Answer 2

.sfexpandableListWrp .sflistItemToggleLnk {
  padding-left: 15px;
  color: white;
  display: block;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 4em;
}

试试这个。它可能会帮助你......

css：用内容装饰一个div而不包装

2 个答案: