151

CSS属性を使用して、カスタムグラフィックを代替の箇条書き文字として指定できることに気付きました。

list-style-image

そしてそれにURLを与えます。

ただし、私の場合は、「+」記号を使用したいだけです。そのためのグラフィックを作成して、それを指す必要はありません。順序付けされていないリストに、プラス記号を箇条書き記号として使用するように指示したいだけです。

これを行うことはできますか、それとも最初にグラフィックにする必要がありますか？

4

18 に答える 18

187

これは遅い答えですが、私はこれに出くわしました...折り返す行のインデントを正しくするには、次のようにしてみてください。

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
于 2012-08-31T14:02:56.490 に答える
87

以下は、飼いならしリストから引用されています：

リストはあるが、箇条書きが不要な場合や、箇条書きの代わりに他の文字を使用したい場合があります。繰り返しますが、CSSは簡単なソリューションを提供します。リストスタイルを追加するだけです：なし。ルールに従って、LIを強制的にぶら下げインデントで表示します。ルールは次のようになります。

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

パディングまたはマージンのいずれかをゼロに設定し、もう一方を1emに設定する必要があります。選択した「箇条書き」によっては、この値を変更する必要がある場合があります。負のテキストインデントにより、最初の行がその量だけ左に移動し、ぶら下がっているインデントが作成されます。

HTMLには標準のULが含まれますが、リストアイテムのコンテンツの前にある箇条書きの代わりに使用する文字またはHTMLエンティティが含まれます。この例では、右の二重引用符である»を使用します：»。

»アイテム1
»アイテム2
»アイテム3
»アイテム4
»アイテム5    ラップする
   ように少し長くします

于 2011-10-08T18:22:15.213 に答える
59

非常に多くのソリューション。
しかし、まだ改善の余地があると思います。

利点：

  • 非常にコンパクトなコード
  • 任意のフォントサイズで動作します
    （絶対ピクセル値は含まれていません）
  • 行を完全に整列します
    （最初の行と次の行の間でわずかなシフトはありません）

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>

于 2016-09-15T10:46:50.403 に答える
49

これはW3Cソリューションです。Firefox、Chrome、Edgeで動作します。

ul { list-style-type: ""; }
/* Sets the marker to a  emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: " "; }
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

于 2013-07-24T07:58:53.933 に答える
21

これが私がこれまでに見つけた最良の解決策です。それはうまく機能し、クロスブラウザ（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はキャラクターに必要な幅です。必要に応じて変更してください。

于 2014-02-17T15:06:26.400 に答える
13

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>

于 2015-12-04T02:24:06.943 に答える
11

:before疑似セレクターを使用して、リストアイテムの前にコンテンツを挿入できます。例は、Quirksmodeのhttp://www.quirksmode.org/css/beforeafter.htmlにあります。これを使用して、ブロック引用符の周りに巨大な引用符を挿入します...

HTH。

于 2011-10-08T18:19:36.060 に答える
11

私のソリューションでは、ポジショニングを使用して、折り返された線を自動的に正しく整列させます。したがって、li：beforeでパディングを設定することを心配する必要はありません。

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>

于 2015-01-06T10:11:24.363 に答える
9

リストアイテム<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;
}
于 2013-10-06T21:22:06.317 に答える
5 

.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>

于 2013-12-31T08:19:31.353 に答える
5 

.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>

于 2019-11-18T12:43:40.703 に答える
5

::marker疑似要素を利用できます。これは、リストアイテムごとに異なる文字エンティティが必要な状況で役立ちます。

ul li::marker {
  content: " "; /* Your symbol here */
}


ul li:nth-child(1)::marker {
  content: "\26BD   ";
}

ul li:nth-child(2)::marker {
  content: "\26C5   ";
}

ul li:nth-child(3)::marker {
  content: "\26F3   ";
}

ul li::marker {
  font-size: 20px;
}

ul li {
  margin: 15px 0;
  font-family: sans-serif;
  background: #BADA55;
  color: black;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
}
<ul>
  <li>France Vs Croatia</li>
  <li>Cloudy with sunshine</li>
  <li>Golf session ahead</li>
</ul>

于 2021-02-13T10:08:07.007 に答える
4

emダッシュスタイル：

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
于 2019-01-30T08:42:27.157 に答える
2

私は負のマージンを使用することを好みます、あなたにもっとコントロールを与えます

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
于 2015-08-04T09:14:30.860 に答える
2

興味深いことに、投稿されたソリューションのどれも十分に良いとは思いません。使用される文字が1em幅であるという事実に依存しているため、そうである必要はありません（ただし、フロートを使用するJohn Magnoliaの回答を除いて、別の方法で物事を複雑にします）。これが私の試みです：

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>

これには（他のソリューションに比べて）次の利点があります。

  1. 例に示されているように、シンボルの幅には依存しません。幅の広い弾丸でも機能することを示すために、2つの文字を使用しました。他のソリューションでこれを試してみると、テキストの位置がずれてしまいます（実際、より高いズームでは*記号で表示されます）。
  2. 弾丸が使用するスペースを完全に制御できます。30pxは何にでも置き換えることができます（1emなど）。3か所すべてで変更することを忘れないでください。
  3. 弾丸の配置を完全に制御できる場合。text-align: center;を好きなものに置き換えるだけです。たとえば color: red; text-align: right; padding-right: 5px; box-sizing: border-box; 、border-boxで遊ぶのが苦手な場合は、幅からパディング（5px）を引くだけです（この例ではwidth：25px）。たくさんのオプションがあります。
  4. フロートを使用していないため、どこにでも収納できます。

楽しみ。

于 2016-03-27T07:42:06.867 に答える
1

Bootstrapでは、クラス を使用できますlist-unstyled。次に、箇条書きの代わりに、たとえばHTML絵文字などを使用できます。

<ul class="text-dark display-4 list-unstyled">
    <li>&#127774; Phasellus iaculis neque</li>
    <li>&#127803; Purus sodales ultricies</li>
    <li>&#127774; Vestibulum laoreet porttitor sem</li>
    <li>&#127803; Ac tristique libero volutpat at</li>
</ul>
于 2021-04-22T12:16:20.463 に答える
1

まず、私の答えはそれに基づいているので、@Jpsyに感謝します。

その答えを拡張して、カスタムアイコンとしてGoogleMaterialIconsパックをサポートしました。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>

ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}

ul li:before {
    font-family: 'Material Icons';
    content: "double_arrow"; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
    position: absolute;
    left: 0;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
于 2021-08-12T17:52:31.480 に答える
-2

これを試して

    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>

于 2016-02-22T14:23:17.417 に答える