<li>要素の弾丸のサイズを変更することは可能ですか？
以下のコードを見てください。
li {
list-style: square; // I want to change the size of this squared bullet.
}
私はそれを達成する方法を見つけることができないようです。
164078 次
15 に答える
46
弾丸のサイズを変更するという意味ですか？これは、liタグのフォントサイズに関係していると思います。したがって、LIのフォントサイズを大きくしてから、内部に含まれる要素のフォントサイズを小さくすることができます。マークアップを追加するのはちょっと面倒ですが、次のようなものです。
li {font-size:omgHuge;}
li span {font-size:mehNormal;}
または、リストの箇条書きに画像ファイルを指定することもできます。このファイルは、必要なだけ大きくすることができます。
ul{
list-style: square url("38specialPlusP.gif");
}
于 2011-06-23T16:06:49.010 に答える
36
@dzimneyの回答に基づき、@ Crismanの回答に類似しています（ただし、異なります）
その答えは良いですが、インデントの問題があります（箇条書きはスコープ内にli表示されます）。おそらくあなたはこれを望まないでしょう。以下の簡単なサンプルリストを参照してください（これはデフォルトのHTMLリストです）。
Lorem ipsum dolor sit amet、ei cum offenditpartiendoiudicabit。mei quaestiohonestatisでは、duo dicit affertpersecutiei。Etiam nusquam cu his、nec alterum posidoniumphilosophiate。Nec a purto iudicabit、vix quodclitaexpetendisはありません。
Quem suscipiantur no eos、sed impedit explicari ea、falli inermis comprehensamestin。Videdicuntancillae cum te、habeo delenit deseruntmeiin。Talesintex his、ipsum essent appellanturetcum。
ただし、上記の回答を使用すると、リストは次のようになります（箇条書きのサイズは無視されます）。
••Lorem ipsum dolor sit amet、ei cum offenditpartiendoiudicabit。mei quaestiohonestatisでは、duo dicit affertpersecutiei。Etiam nusquam cu his、nec alterum posidoniumphilosophiate。Nec a purto iudicabit、vix quodclitaexpetendisはありません。
••Quem suscipiantur no eos、sed impedit explicari ea、falli inermis comprehensamestin。Videdicuntancillae cum te、habeo delenit deseruntmeiin。Talesintex his、ipsum essent appellanturetcum。
したがって、問題を解決するこのアプローチをお勧めします。
li {
list-style-type: none;
position: relative; /* It's needed for setting position to absolute in the next rule. */
}
li::before {
content: '■';
position: absolute;
left: -0.8em; /* Adjust this value so that it appears where you want. */
font-size: 1.1em; /* Adjust this value so that it appears what size you want. */
}<ul>
<li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
<li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>于 2017-01-05T17:56:44.487 に答える
25
liの内容を。などの別の要素でラップできますspan。次に、li大きい方を指定し、 ：にfont-size通常の値font-sizeを戻します。span
li {
font-size: 36px;
}
li span {
font-size: 18px;
}
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
</ul>
于 2011-06-23T16:02:20.390 に答える
5
弾丸のサイズを変更する別の方法は次のとおりです。
- 弾丸を完全に無効にする
::before疑似要素を使用してカスタムの箇条書きを再度追加します。
例：
ul {
list-style-type: none;
}
li::before {
display: inline-block;
vertical-align: middle;
width: 5px;
height: 5px;
background-color: #000000;
margin-right: 8px;
content: ' '
}<ul>
<li>first element</li>
<li>second element</li>
</ul>マークアップの変更は必要ありません
于 2017-02-08T21:14:51.193 に答える
3
各リスト項目の先頭にある弾丸のサイズを意味していると思います。その場合は、代わりに画像を使用できます。
list-style-image:url('bigger.gif');
list-style-type:none;
要素の実際のサイズを意味する場合は、li通常どおりとを使用して変更できwidthますheight。
于 2011-06-23T16:02:17.023 に答える
1
<li>sのコンテンツをsでラップしたくない場合は、次のよう<span>に使用することもできます。:before
ul {
list-style: none;
}
li {
position: relative;
padding-left: 15px;
line-height: 16px;
}
li:before {
content: '\2022';
line-height: 16px; /*match the li line-height for vertical centered bullets*/
position: absolute;
left: 0;
}
li.huge:before {
font-size: 30px;
}
li.small:before {
font-size: 10px;
}
のフォントサイズ:beforeを好きなように調整します。
<ul>
<li class="huge">huge bullet</li>
<li class="small">smaller bullet</li>
<li class="huge">multi line item with custom<br/> sized bullet</li>
<li>normal bullet</li>
</ul>
于 2016-07-02T21:14:44.703 に答える
1
:: marker CSS疑似要素を使用して、リストの番号または箇条書きのスタイルを設定できます。現在、2022年1月、Safariのサポートは色とフォントサイズに制限されています。
例：
::marker {
color: red;
font-size: 2rem
}
ul > li::marker {
color: blue;
}
ol > li::marker {
font-size: 1rem
}<ul>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ul>
<ol>
<li>Wake up</li>
<li>Code</li>
<li>Sleep</li>
</ol>于 2022-01-31T15:18:33.377 に答える
0
<ul>
<li id="bigger"></li>
<li></li>
<li></li>
</ul>
<style>
#bigger .li {height:##px; width:##px;}
</style>
于 2011-06-23T16:02:32.467 に答える
0
弾丸自体の実際のサイズまたは形式を変更するには、画像を使用する必要があります。
適切なパディングを使用して背景画像を使用して、コンテンツが重ならないようにコンテンツを微調整できます。
list-style-image:url(bigger.gif);
また
background-image: url(images/bullet.gif);
于 2011-06-23T16:03:33.587 に答える
0
<li>コンテンツを<span>または他のタグでラップする場合は、のフォントサイズを<li>変更すると、箇条書きのサイズが変更され、のコンテンツが<li>元のサイズにリセットされます。em単位を使用して、<li>弾丸のサイズを比例的に変更できます。
例えば：
<ul>
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
次にCSS：
li {
list-style-type: disc;
font-size: 0.8em;
}
li * {
font-size: initial;
}
より複雑な例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Item Bullet Size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.disc li {
list-style-type: disc;
font-size: 1.5em;
}
ul.square li {
list-style-type: square;
font-size: 0.8em;
}
li * {
font-size: initial;
}
</style>
</head>
<body>
<h1>First</h1>
<ul class="disc">
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
<h1>Second</h1>
<ul class="square">
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
</body>
</html>
結果：
于 2016-07-02T11:01:13.710 に答える
0
私は、本当にうまく機能し、カスタムシンボルのすべての落とし穴を回避できると思う解決策を見つけました。li：beforeソリューションの主な問題は、list-itemsが1行より長い場合、テキストの最初の行の後に正しくインデントされないことです。負のパディングでテキストインデントを使用することで、その問題を回避し、すべての行を適切に整列させることができます。
ul{
padding-left: 0; // remove default padding
}
li{
list-style-type: none; // remove default styles
padding-left: 1.2em;
text-indent:-1.2em; // remove padding on first line
}
li::before{
margin-right: 0.5em;
width: 0.7em; // margin-right and width must add up to the negative indent-value set above
height: 0.7em;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background-color: orange;
content: ' '
}
于 2020-05-19T03:21:39.357 に答える
0
この方法では、元のディスクがあったテキストフローからディスクを移動しますが、調整可能です。
ul{
list-style-type: none;
li{
position: relative;
}
li:before {
position: absolute;
top: .1rem;
left: -.8em;
content: '\2022';
font-size: 1.2rem;
}
}
于 2020-09-17T20:34:27.600 に答える
0
これがUnicodeバージョンです。これにより、CSSの箇条書きリストに好きなテキスト記号や絵文字をドロップできます。必要なのはUnicodeの「コードポイント」値だけです。
<style>
#html_list{
position: relative;
margin-left: 1em;
list-style: none;
}
#html_list li::before {
display: inline-block;
content: "\2023";
color: #114f66;
font-size: 3rem;
line-height: 0;
padding: 0 .1em 0 0;
margin: 0;
text-align: left;
vertical-align: top;
position: relative;
top: .2em;
left: 0em;
}
#html_list li {
text-align:left;
vertical-align: top;
padding: .2em 0em .2em 0em;
margin: 0;
font-size: 1rem;
}
</style>
<ul id="html_list">
<li><a href="#">Area 1</a></li>
<li><a href="#">Area 2</a></li>
<li><a href="#">Area 3</a></li>
</ul>
リストでUnicodeまたはテキスト記号を使用する際の主な問題は、サイズ変更です。高さ、行の高さ、パディング、および余白を取り除いた後でも、フォントサイズを使用してサイズを変更すると、シンボルに間隔ができます。これのほとんどは、選択したフォントに基づいています。注意して、Unicodeグリフの範囲を持つCSSのフォント面を選択してください。
Unicodeの箇条書きテキストとそのスタイルを、疑似要素を使用してリストテキストの残りの部分から分離する、上記の可能な限り最良のソリューションを設計しました。このアイデアにより、親の順序付けされていないリストのデフォルトのリストスタイルの箇条書きを削除し、新しいUnicodeの箇条書きを::before疑似要素に挿入できます。その後、必要に応じてサイズ変更と再配置を行うことができます。サイズ設定された箇条書きをリストテキストと並べたら、必要に応じてリストテキストのパディングまたはサイズ変更を開始でき、箇条書きも一緒に移動します。
于 2021-07-24T14:49:03.483 に答える
0
言及されたこのテクニックを見たことがありません。それは基本的にあなたが望むどんなサイズの「ドット」を持つことを可能にします。丸い境界線を使用して円を描きます。
li {
list-style-type: none;
position: relative;
margin-left: 2.5rem;
}
li:before {
content: " ";
border: 1rem solid #1b1b1b;
border-radius: 99rem;
height: 0; /* it's all controlled by the border */
width: 0;
margin-top: -0.4rem;
margin-left: -2.5rem;
position: absolute;
}
于 2021-08-06T03:55:20.050 に答える