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を介して数字を隠しますか? 他のアイデア？

更新: 2 つの UL で構成されるソリューションを試してみます。1 つは他の UL にネストされています。1 つはナンバリングを担当し、もう 1 つはコンテンツを保持します。

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/uVRw/のデモ

于 2013-10-04T21:38:21.863 に答える