web-dev-qa-db-ja.com

middotを使用します。 <ul>の箇条書きの代わりに

CSSで list-style-type property に関する記事を見つけましたが、middotはリストされていません。 （・）デフォルトのdiscまたは箇条書きとは対照的に、オプションとして。 （•）。 HTMLまたはCSSでこれを行う方法はありますか？

htmlcsshtml-lists
21
steveo225

CSS（:beforeおよびcontent:をサポートするブラウザーで動作します）：

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it's a bullet. */
}

注意：これは実際のリストスタイルではありません。したがって、リストをラップすると、面白く見えます。これはおそらく、いくつかの単位の負のテキストインデントによって軽減され、リストスタイルのように機能するようになります。

別の実装：

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

このバージョンはより良く動作するようです。私はよく:beforeと:afterを使用して境界線などの余分なものを追加しますが、箇条書きを追加する場合はそうではないと思います。これは別の提案ですが、おそらく推奨されるものです。

60
Levi Morrison

はい！ before擬似クラスを使用して、各アイテムの前に文字を挿入できます。

.DotList li:before
{
    content: "·";
}

ここ はjsFiddleの例です。

3
Maxpm

list-style-type は使用する文字を選択せず​​、使用する抽象マーカーを選択します。標準状態に注意してください。

値 'none'はマーカーなしを指定します。そうでない場合は、グリフ、番号付けシステム、およびアルファベットシステムの3種類のマーカーがあります。

グリフは、ディスク、円、正方形で指定されます。正確なレンダリングは、ユーザーエージェントに依存します。

マーカーをさらに制御するには、 list-style-image または :before 擬似要素および content プロパティ、list-style-typeを「なし」に。 :beforeおよび contentプロパティ は、IE 7以前ではサポートされていません。したがって、list-style-imageをサポートするIE 7または単純にIE 7に別のマーカーを使用させます。条件付きコメントを使用してIE = 7以前。

2
outis

LIで背景画像を使用できます

1つの可能な例
http://css.maxdesign.com.au/listamatic/vertical05.htm

1
Brian Hoover

CSS2仕様 で定義されているlist-style-typeの利用可能なオプションは限られています。

次を使用できます。

  • ディスク
  • サークル
  • 平方
  • 小数
  • 10進ゼロ
  • ローマン
  • 上ローマ
  • 低いギリシャ人
  • 低ラテン
  • 高ラテン
  • アルメニア人
  • ジョージア語
  • 低アルファ
  • 上位アルファ
  • none

何かカスタマイズしたい場合は、 list-style-imageプロパティ を使用します

生成されたコンテンツをサポートするブラウザーのスタイルを設定している場合は、次を使用できます。

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}
1
zzzzBov

の代わりに li:before、これはページ上のすべてのli（メニュー、タブ、アコーディオン内）に影響するため、これを使用しました。

ul {
        list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}
  
<ul>
  <li>This is my middot</li>
</ul>
0
M.S.