8

我有一个有序列表，我以两种方式设置了样式：

  1. 将数字着色为与列表文本不同
  2. 为每个列表项应用背景颜色和边框

请参阅本页右侧的列表

通过首先将橙色样式应用于<li>，然后仅使用 jQuery 将黑色样式应用于列表文本，将数字变为橙色：

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

我宁愿只使用 CSS，但是，嘿。

所以剩下的问题是如何在数字下扩展背景颜色/边框。

感谢您查看我的问题！

4

5 回答 5

8

修改后的答案： jsFiddle 纯 CSS 解决方案

这是一个修改后的方法，它不使用 OP 的原始 jQuery 框架，这个请求在我之前的回答中没有得到满足。该方法使用现有的 jQuery 为li元素应用 span 包装器，因为无法直接修改 HTML。

这种新方法使用 CSS 伪选择器:before和:afterCSS 2.1counter函数，可以将其数字列表风格化，因此不需要 jQuery 包装器。事实上，jsFiddle 修订版使用 Google @font-face 字体显示数字。

在此处输入图像描述

使用 CSS 计数器功能是通过在元素中声明要使用的变量名ul，然后在元素中递增计数器并将:before其用作实际内容来完成的。

简单示例： jsFiddle CSS 计数器

在此处输入图像描述

HTML：

<ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

CSS：

ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

更多关于 CSS 计数器的信息在这里。


我在 OP 的问题中使用现有框架的原始过时答案如下所示。

我仔细查看了您的问题，然后查看了您的网页。

这是您需要的解决方案： jsFiddle

总而言之，这是使其工作的替换 CSS 规则：

#secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

结果：
在此处输入图像描述

额外：这个变体示例强调数字：jsFiddle

于 2012-06-22T04:29:04.780 回答
7

对于您的第二个问题，一种可能性是将标签更改list-style-position为内部：li

li { list-style-position: inside; }

这会将数字与文本的其余部分内联，并允许您一起设置样式。但是，这确实会阻止文本单独对齐。

对于您的第一个问题，理论上可以使用伪元素单独设置数字样式，marker如下所示：

li::marker { color: orange; }

但是，我认为目前任何浏览器都不支持此功能。您可以使用 mozilla 特定的::-moz-list-number，但这显然不适用于其他浏览器。

您可以在我的示例中看到所有这些位：http: //jsfiddle.net/XmtxL/

于 2012-06-14T15:01:11.863 回答
1

仅使用 css 很容易实现：

#secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

用正确的颜色代码替换占位符！

您可能不得不根据您的 css 来摆弄它，但原则是：

  • 将您希望“数字”显示的颜色应用于<ol>
  • 将文本颜色应用于<li>标签

至于你的问题的其余部分，将其包装<ol>在一个容器 div 中并为其应用所需的背景。

于 2012-06-14T14:28:21.003 回答
0

至于问题#1：您似乎已经为它们着色了不同的颜色？（如果您仍然需要解决方案，我可以编辑此答案）

对于＃2：

ul#idname li {
   background:#ddd;/*whatever colour*/
}

那个idname的id在哪里<ul>

于 2012-06-14T14:31:37.933 回答
0

对于那些像我一样只需要背景图像的人来说，有一个纯 CSS 解决方案：

ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1

见代码笔

于 2014-01-07T19:00:14.393 回答