回答:
以下は、飼いならしリストから引用したものです。
リストはあるが箇条書きは必要ない場合や、箇条書きの代わりに他の文字を使用したい場合があります。ここでも、CSSは簡単なソリューションを提供します。リストスタイルを追加するだけです。ルールに合わせて、LIをぶら下げインデントで表示するように強制します。ルールは次のようになります。
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }パディングまたはマージンのいずれかをゼロに設定し、もう一方を1emに設定する必要があります。選択する「弾丸」によっては、この値を変更する必要がある場合があります。負のテキストインデントは、最初の行をその量だけ左に移動させ、ぶら下げインデントを作成します。
HTMLには標準のULが含まれますが、リストアイテムのコンテンツの前にある箇条書きの代わりに使用する文字またはHTMLエンティティが含まれます。私たちのケースでは、右の二重角引用符»を使用します。
»項1
»項2
»項3
»項4
»項5私たちが作ってあげる
ように少し長く
、それがラップします
これは遅い答えですが、私はこれに出くわしました...折り返す行でインデントを正しくするには、次のようにしてみてください。
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}text-indent: -2ch、+記号とその後のスペースを考慮してpadding-right: 1chから、そのスペースを追加します。それでも、大きな+1。
非常に多くのソリューション。
しかし、まだ改善の余地はあると思います。
利点：
ul {
position: relative;
list-style: none;
margin-left: 0;
padding-left: 1.2em;
}
ul li:before {
content: "+";
position: absolute;
left: 0;
}<ul>
<li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
<li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>content: url('link-to-my-asset.svg');弾丸とコンテンツの間の画像の幅とパディングを使用して設定することができました。ありがとう！
これはW3Cソリューションです。FirefoxとChromeで動作します。
ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */http://dev.w3.org/csswg/css-lists/#marker-content
li:before {content:"…";}他のインデントや配置なしで使用されたかのように見えます。
これが私がこれまでに見つけた最良の解決策です。それは素晴らしい働きをし、それはクロスブラウザ（IE 8+）です。
ul {
list-style: none;
margin-left: 0;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}重要なことは、文字が長すぎて1行に収まらない場合でもテキストが整列したままになるように、固定幅の浮動ブロックに文字を配置することです。 1.2emは、キャラクターに必要な幅です。必要に応じて変更してください。
:before疑似セレクターを使用して、リスト項目の前にコンテンツを挿入できます。例は、Quirksmodeのhttp://www.quirksmode.org/css/beforeafter.htmlにあります。これを使用して、ブロック引用符の周りに巨大な引用符を挿入します...
HTH。
私のソリューションでは、配置を使用して、折り返された行を自動的に正しく整列させます。したがって、li：beforeでpadding-rightを設定することについて心配する必要はありません。
ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
ul li {
position: relative;
margin-left: 1em;
}
ul li:before {
position: absolute;
left: -1em;
content: "+";
}<ul>
<li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>リストアイテムに<li>影響を与えないように、スタイルを修飾することをお勧めし<ol>ます。そう：
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
content: "+";
padding-right: 5px;
}Font-awesomeは、すぐに使える優れたソリューションを提供します。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul class='fa-ul'>
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>.list-dash li, .list-bullet li {
position: relative;
list-style-type: none; /* disc circle(hollow) square none */
text-indent: -2em;
}
.list-dash li:before {
content: '— '; /* em dash */
}
.list-bullet li:before {
content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}<ul class="list-dash">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>全角ダッシュスタイル：
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}興味深いことに、私は投稿された解決策がどれも十分に優れているとは思いません。なぜなら、使用されている文字が1em幅であり、そうである必要はないという事実に依存しているためです。別の方法で物事を複雑にします）。これが私の試みです：
ul {
list-style-type: none;
margin-left: 0;
padding-left: 30px; /* change 30px to anything */
text-indent: -30px;
}
ul li:before {
content: "xy";
display: inline-block;
width: 30px;
text-indent: 0;
text-align: center; /* change this for different bullet position */
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>これには、他のソリューションに比べて次のような利点があります。
text-align: center;好みに合わせて何でも入れ替えてください。たとえば、試してみる
color: red;
text-align: right;
padding-right: 5px;
box-sizing: border-box;
か、border-boxでの再生が気に入らない場合は、幅からパディング（5px）を差し引いてください（つまり、この例ではwidth：25px）。オプションはたくさんあります。楽しい。
.single-before {
list-style: "👍";
list-style-position: outside!important;
}<ul class="single-before">
<li> is to manifest perfection already in man.</li>
<li> is to bring out the best facets of our students personalities.</li>
</ul>!important、BlogspotのカスタムCSSを機能させるために不可欠なを忘れていました
これを試して
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>