0

我需要实现这样的目标......

编号列表

我猜图片需要以某种形式的数组存储在包含图像链接的 Javascript 中。但我不确定它是否可以仅在 HTML 和 CSS 中实现。

这个问题有一个解决方案，它使用 ":before" 伪元素，但是否有更跨浏览器友好的解决方案可用？

4

2 回答 2

0

您可以使用常规并为每个列表项<ol>添加一个（红色圆圈）background-image

于 2013-07-19T13:05:43.357 回答
0

为什么还要使用图像：

 <style type="text/css">
   body {
    background:#333; 
    color:#FFF;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
   }
   .number-list {
      list-style-type:none;
      margin:0px;
      padding:0px;
   }
   .number-list li {
 width:100%;
 float:left;
 margin-bottom:10px;
 line-height:35px;
 font-size:16px;
   }
   .number-list li .order-number {
      background:#900;
      color:#FFF;
      width:35px;
      height:35px;
      text-align:center;
      line-height:35px; 
      float:left;
      margin-right:15px;
      -webkit-border-radius:35px;
         -moz-border-radius:35px;
          -ms-border-radius:35px;
      -border-radius:35px;
        border-radius:35px;
   }
  </style>
  </head>

  <body>

  <ol class="number-list">
      <li>
          <span class="order-number">1</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">2</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">3</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">4</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
  </ol>

IE 8 < 中的人可以有一个正方形而不是一个圆形......看起来很合适

于 2013-07-19T13:21:04.410 回答