web-dev-qa-db-ja.com

リストスタイルの箇条書きタイプのサイズを大きくする

CSSを使用してjust bullet list-style-typeのサイズを増やす方法はありますか？箇条書きテキストのサイズを大きくしたくありません。箇条書きの種類だけを増やします。画像もJavaScriptも使用できません。それは私が中に埋め込むことができるものでなければなりません<style>タグ内の<head> 鬼ごっこ。

csshtml-lists
20
Chris22

古いバージョンのIEでは機能しない場合があります。

li:before{ content:'\00b7'; font-size:100px; }

デモ

IE6の場合：

JavaScriptや画像がなければ、<span>&#183;</span>すべてのリストアイテムの冒頭とそのスタイル。

20
bookcasey

私も同じようなことをしなければなりませんでした。私の方法は、li内のテキストの周りにspanタグを追加することでした。

<li><span>Item 1</span></li>
<li><span>Item 1</span></li>

次に、liのフォントサイズを増やし、スパンのフォントサイズを小さくします。

li {
  font-size: 20px;
}
li span {
  font-size: 14px;
}

追加のサイズ調整に対応するために、行の高さとマージンを調整する必要がある場合があります。ただし、この方法では、箇条書きにテキストとは別に色を付けることもできます。

4
Tom Clarke

画像を使用できないと言うとき、liタグを編集して画像を追加できないのですか、それとも画像をまったく使用できないのですか？

li要素では、list-style-imageプロパティ。

li {
 list-style-image: url('/imagepath.png');
}

これは、リストのマークアップを編集しなくても、headタグに含めることができます。

0
Brandon

私が知っている方法はありません。

しかし、あなたは：beforeを使ってそれを偽ることができます

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
0
Kae Verens

これに対する解決策も探していて、pをli内にネストすると、箇条書きと箇条書きテキストを別々にスタイルできることがわかりました。

<div>
  <ul>
    <li><p>Hello</p></li>
  </ul>
</div

div ul li {
 /*this will style the bullets*/
}

div ul li p {
/*this will style the text*/
}
0
deeble

（例：.menu li a）タグの背景色を入れて、パディングを追加します。そのため、ボックス、次にborder-radius、そして（.menu li）のように、左右に間隔を空けるためにパディングを適用します...（逆順で説明）

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
0
Lohith