4

上付き文字を使用して順序付きリストを作成したいので、htmlで次のようにします。

<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

しかし、それを次のように表示する

1)項目 1
2)項目 2
3)項目 3a
   項目 3b

ただし、既存のソリューションでは、テキストのみを含むリスト項目に対してのみ機能することが示されています。他のコンテンツ (スパン、div、p タグ、画像、その他のリスト、および名前) がある瞬間、結果は正確ではありません。私のhtmlにはリストの「スタイル」が混在しているため（一部はテキストのみ、一部はさまざまなタグが混在）、liタグ内のあらゆるものを「通常の」タグであるかのように処理できる柔軟性が必要です. 正直なところ、私は本当の CSS ウィザードではありません。

これは私が使用したコードです（上記のページにある構造的なアイデア、上付き文字のスタイルを追加）：

ol.sup_n {
    counter-reset: item;
    margin: 0;
    padding: 0;
    list-style:none;
}

.sup_n li {
    display: block;
    margin-left: 1em;
}

.sup_n li:before {
    content: counter(item) ")";
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;
    padding-right: 0.5em;
    margin-left: -3.5em;       
    vertical-align:super;
    font-size:xx-small;
}
<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

ただし、リスト項目にサブ要素がない場合にのみ正常に機能します。li の複数の異なる要素で動作させるにはどうすればよいですか? この例では p タグのみを使用していますが、実際には別のタグにすることもできます。これらをカバーするための最良のアプローチは何でしょうか?

4

3 に答える 3

4

いくつかのものを微調整した後、その間に自分でそれを見つけました。興味のある人はここにコードがあります。私を正しい方向に向けてくれてありがとう

ol.super {
        counter-reset: item;
        padding: 0;
    	list-style:none;
    }
    
    .super li:before{
    	content: counter(item) ")";
        counter-increment: item;
    	position: absolute;	
    	vertical-align:super;
    	font-size:xx-small;
    	left: 1em;
    }
    
    .super li{
    	position: relative;
    	display: block;
    	padding: .0em .0em .0em 1.5em;
    }
<ol class="super">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

于 2013-03-02T22:14:44.900 に答える
0

ここで可能な解決策を見つけました: http://www.red-team-design.com/css3-ordered-list-styles

このようなコードで行われます

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
}

この例では、独自のスタイルを実行できるはずです

于 2013-03-02T14:58:04.183 に答える
-2 

.super span{
    vertical-align:super;
}
<ol class="super">
<li>Item <span>1</span></li>
<li>Item <span>2</span></li>
<li>Item <span>3</span></li>
</ol>

于 2013-03-02T14:52:25.627 に答える