2

我有一个更复杂的结构，它分解成这样的东西：

http://jsfiddle.net/HGLNz/14/

<ul>
    <li class="item top"></li>
    <li class="item top-middle"></li>
    <li class="item bottom"></li>
</ul>

ul {
    background-color: blue;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 400px;
    font-size: 0;
}

ul li.item {
    background-color: green;
    width: 100px;
    height: 100px;
    position: absolute;;
}

li.item.top {
    top: 8px;    
}

li.item.top-middle {
    top: 108px;
}

li.item.bottom {
    top: 308px;
}

基本上，我渲染一个 ul，设置它的背景，然后执行一系列计算以将 ul 中的项目定位在非常特定的位置。

我现在正在尝试对 ul 左侧​​和右侧的每个可能位置进行编号。这个原型看起来像：

在此处输入图像描述

放置在 ul 内的列表项会覆盖数字，但没有列表项的位置会明显显示它们的数字。

所以，我的问题是 - 这样做的好方法是什么？将我的 ul 包裹在另一个 ul 中，将数字作为列表项，然后通过 z-index 掩盖数字？其他想法？

更新：我将尝试一个由两个 UL 组成的解决方案，一个嵌套在另一个中。一个负责编号，另一个负责保存内容。

4

3 回答 3

3

我只是为此使用CSS。我在即将到达的公共汽车上，但这里有一个快速的 JSFiddle。

这个解决方案的关键是 CSS 计数器。

body {
  counter-reset: li-counter;
}
li {
  counter-increment: li-counter;
}
li:before,
li:after {
  position: absolute;
  top: 45%;
  display: block;
  content: counter(li-counter);
}

一旦我在家，我将更新更多浏览器支持、替代解决方案等！

编辑：Gaby 跳了进去，基本上准确地写下了我的意图，所以我不会再详细说明了。话虽如此，看来我们可能需要更多信息来帮助您。我写了一篇关于这个问题的长评论，试图进一步澄清你可能想要的东西。

于 2013-10-04T21:28:57.437 回答
2

如果你可以用它们支持ul的最大数量填充元素并li用一个类标记空的元素，你可以使用CSS 计数器

这样您就不必计算具体的位置，只需将空的标记li为这样..

<ul class="countable">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item empty"></li>
    <li class="item"></li>
</ul>

和

ul.countable {
    background-color: blue;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 400px;
    font-size: 0;
    counter-reset: countable-li;
}
ul.countable li.item {
    background-color: green;
    width: 100px;
    height: 100px;
    position:relative;
    counter-increment:countable-li;
}
ul.countable li.empty{
    background-color:blue;
}
ul.countable li.empty:after,
ul.countable li.empty:before{
    content: counter(countable-li);
    font-family:courier;
    color:white;
    line-height:12px;
    font-size:12px;
    position:absolute;
    top:50%;
    right:5px;
    margin-top:-6px;
}
ul.countable li.empty:before{
    right:auto;
    left:5px;
}
ul.countable li:before,
ul.countable li:after{
    content:none;
}

演示在http://jsfiddle.net/uVRwh/

于 2013-10-04T21:38:21.863 回答
1

您可以使用他的计数器重置属性

JS小提琴

    body {
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}

li:before {
  content: counter(my-awesome-counter);
    position:absolute;
    left:.5em;
    color:white;
}
li:after {
  content: counter(my-awesome-counter);
    position:absolute;
    right:.5em;
    color:white;
}

ul {
    background-color: blue;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 400px;
}

li {
    position:relative;
}
于 2013-10-04T21:40:29.227 回答