4

私はOLのアイテムをどのようにスタイリングするかを理解しようとしています. 私の目標は、最終結果が ol を水平にし、左下の数字を li テキストの下に揃えることです。

最終結果の例:
Item Item Item Item Item
1 2 3 4 5

4

3 に答える 3

5

カスタム カウンターを配置するために疑似要素を使用してこの設計を実現する 1 つの方法を次に示します。

順序付きリストまたは順序なしリストのいずれかから開始できます。

<ol class="list">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
    <li>Durian</li>
</ol>

次の CSS を適用します。

.list {
    counter-reset:itemcounter;
    margin: 0;
    padding: 0;
}
.list li {
    border: 1px dotted gray;
    margin-right: 30px;
    float: left;
    list-style: none;
}
.list li:after {
    content:counter(itemcounter);
    color:#000;
    counter-increment: itemcounter;
    display: block;
    background-color: pink;
    padding: 0px;
    text-align: left;
    padding-right: 5px;
}

カスタム カウンターを定義し、疑似要素に配置しli:afterます。

水平メニューを取得するためにリスト項目をフロートさせましたが、インライン ブロックを使用することもできます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/DgZvg/

下位互換性

ここでの設計上の制限要因は、今後 IE8 からサポートされるカスタム カウンターです: http://caniuse.com/#feat=css-counters

古いブラウザの代替

カウンターと生成されたコンテンツをサポートしていない古いブラウザーの場合は、次のような方法を試すことができます。

リスト コンテンツにラッパー要素を追加する必要があります。

<ol class="list">
    <li><p>Apples</p></li>
    <li><p>Bananas</p></li>
    <li><p>Cherries</p></li>
    <li><p>Durians</p></li>
</ol>

次に、次の CSS を適用します。

.list {
    margin: 0;
    padding: 0;
}
.list li {
    list-style-position: inside;
    border: 1px dotted gray;
    margin-right: 30px;
    padding-left: 5px; /* gives you some control... */
    float: left;
    padding-top: 20px;
    line-height: 20px;
    width: 100px;
    position: relative;
}
.list li p {
    height: 20px;
    margin: 0;
    position: absolute;
    bottom: 20px;
    left: 0;
}

この場合、list-style-position: inside20px の line-height と 20px の padding-top を指定して、2 行のテキスト領域を定義します。リスト項目の幅も指定する必要があります。

次に、内側のラッパーに高さを設定し、絶対配置を使用して下部を 20px オフセットします。

これははるかに多くの作業であり、幅と高さの長さのために少し制約がありますが、これは概念実証です。

デモを参照してください: http://jsfiddle.net/audetwebdesign/PUH9V/

于 2013-09-30T15:15:51.567 に答える
0

要素の上にテキストを配置するために、li 内でスパンを使用しました。実際の環境でより適切に機能するように、CSS を調整する必要がある場合があります。

http://jsfiddle.net/j5Nbx/2/

HTML

<ol class="example">
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
</ol>

CSS

.example li {
    float:left;
    padding:10px;
}

.example:after{
    content:"";
    display:block;
    clear:both;
}

.example li span {
    position:relative;
    left:-35px;
    top:-20px;
}
于 2013-09-30T15:18:11.867 に答える
0

そして、これがCSS 2.xとクロスブラウザを使った私のやり方です:)

HTML

<ol>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
</ol>

CSS

ol li {
    position:relative;
    min-width:100px;
    padding:30px 0 0;
    float:left;
}

ol li span {
    position:absolute;
    left:-30px;
    top:0px;
}

作業: http://jsfiddle.net/shekhardesigner/fuLjk/

于 2013-09-30T15:20:00.493 に答える