Question

我有一个词汇表列表，我需要格式化：

1苹果 - 红色多汁的水果

其中1和定义（Apple）都是红色，解释是灰色的。目前我的列表如下所示：http://imgur.com/TaAQBxb

我最接近的是“目标/无目标”定义，但问题在于我需要在解释的开头而不是定义下进行灰色文本。

以下是列表的代码：

HTML：

<li class="dropdownAU_CNT"><a href="#" data-toggle="dropdownAU_CNT">G<i class="icon-arrow"></i></a>
                            <ul class="dropdownAU_CNT-menu">
                                <li>
                                    <ul>
                                        <li><div class="divTextRedDef">Goals Home Team –</div><div class="divText"> Home team exact number of goals at the end of normal time.</div>
                                        </li>
                                        <div class="divSpacer10"></div>
                                        <li><div class="divTextRedDef">Goals Away Team –</div><div class="divText"> Away team exact number of goals at the end of normal time.</div>
                                        </li>
                                        <div class="divSpacer10"></div>
                                        <li><span class="divRedCharacter">Goal/No Goal –</span> Goal is the option of choosing both teams to score. No Goal is the opposite option of both teams not to score, 
                                             so either only 1 team scores or neither teams scores at all.
                                        </li>
                                        <div class="divSpacer10"></div>
                                        <li><div class="divTextRedDef">Goal/No Goal 1st Half (GG/NG) –</div><div class="divText"> Same as Goal/No Goal option for the first half only.</div>
                                        </li>
                                        <div class="divSpacer10"></div>
                                        <li><div class="divTextRedDef">Goal/No Goal 2nd Half (GG/NG) -</div><div class="divText"> Same as Goal/No Goal option for the second half only.</div>
                                        </li>
                                        <div class="divSpacer10"></div>
                                    </ul>
                                </li>
                            </ul>
                        </li

CSS：

.divTextRed  { font-family:Arial; text-align:justify; font-size:12px; margin:0px 10px 0px 10px; text-transform:none; font-weight: normal; color: #c81018; }         
.divTextRedDef { font-family:Arial; text-align:justify; font-size:12px; margin:0px 10px 0px 10px; text-transform:none; font-weight: normal; color: #c81018; float:left; display:table-row;}
.dropdownAU_CNT-menu li ul li { font-family:Arial; font-size:12px; margin-top: 2px; display: table; position:relative; list-style:none; margin:2px 0 6px 2em; margin-bottom:10px; text-indent: -44px;}
.dropdownAU_CNT-menu li ul li:before { color:#ad0c10 !important; content: counters(item, ".") " "; counter-increment: item; display: inline-block; text-align:right; padding-right:10px; width:2em; top:-2px; left:-2em; margin-right:10px; color:#ad0c10 !important; }

任何帮助都将非常感谢!!

Answer 1

如果您想在定义下进行解释：

<ul>
    <li>
        1 Apple - <div class="divText">Home team exact number of goals at the end of normal time.</div>
    </li>

    <li>
        2 Apple - <div class="divText">Red juicy fruit.</div>
    </li>

</ul>

CSS

ul li { color: #ad0c10; margin:0 0 10px;}
ul li div.divText {color: #c81018;}

btw ..你不应该在LI之间使用DIV

Answer 2

1）为计数器使用绝对定位的伪元素

2）使用绝对定位的伪元素作为定义

3）如果您希望文本在说明下运行 - 请在列表项上使用padding-left

<强> FIDDLE

ul {
    counter-reset: itemCounter;
    list-style:none;
}
li {
    padding-left: 75px;
    counter-increment: itemCounter;
    position:relative;
}
li:before {
    content: counter(itemCounter);
    position: absolute;
    left:0;
    color: purple;
}
li:after {
    content: attr(data-item)  ' - \00a0';
    position: absolute;
    left:15px;
    top:0;
}

格式化数字列表以及定义和说明

2 个答案:

CSS