web-dev-qa-db-ja.com

HTMLリストスタイルタイプのダッシュ

ダッシュ（ - または - –または - —）を使用してHTMLでリストスタイルを作成する方法はありますか。

<ul>
  <li>abc</li>
</ul>

出力中：

- abc

li:before { content: "-" };のようなものでこれをすることは私には起こりました、しかし私はそのオプションの短所を知りません（そしてフィードバックのために大いに義務があるでしょう）。

より一般的に言えば、リスト項目に総称文字を使用する方法を知っても構いません。

htmlcssxhtmlhtml-lists
199
Brian M. Hunt

IE 7以下ではサポートされていないことを念頭に置いて、:beforeおよびcontent:を使用できます。それで問題なければ、これがあなたの最善の解決策です。詳細については、 私は使用できます または QuirksMode CSSの互換性表を参照してください。

古いブラウザで動作するはずのやや厄介な解決策は、箇条書きに画像を使用し、その画像をダッシュ​​のように見せることです。例として W3C list-style-imageページ を参照してください。

99
Darko Z

:before疑似クラスを使用してインデント付きリストの効果を維持するための簡単な修正（text-indent）があります。

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text
207
aron.lakatos

これを使って：

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
63
Jase

これは相対位置も絶対位置もなく、text-indentもないバージョンです。

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

楽しい ;）

60
velop
ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

デモ フィドル

27
Keyan Zhang

私も自分のバージョンを追加してみましょう。大部分は私が自分の好みの解決策をもう一度見つけるためです。

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

20
three
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
7
user3849374

私の場合はCSSにこのコードを追加します

ul {
    list-style-type: '- ';
}

十分でした。そのままシンプルです。

5
Albert Sosnowski

これが私の フィドル バージョンです：

.generatedcontentの（modernizr）クラス<html>は実質的にIE8 +と他のすべての普通のブラウザを意味します。

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS：

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}
5
biziclop

もっと良い方法があるかどうかはわかりませんが、ダッシュを描いたカスタムの箇条書きグラフィックを作成してから、 リストを使用してリストに使用したいことをブラウザに知らせることができます。 -style-type プロパティ。このページの例は、グラフィックを箇条書きとして使用する方法を示しています。

私は使用しようとしたことは一度もありません：以前はあなたが持っていた方法で、それはうまくいくかもしれませんが。欠点は、古いブラウザではサポートされなくなることです。私の直感的な反応は、これはまだ考慮に入れるのに十分重要であるということです。将来的には、これはそれほど重要ではないかもしれません。

編集：私はOPのアプローチで少しテストをしました。 IE8では、私はそのテクニックをうまく動かすことができなかったので、それは間違いなくまだクロスブラウザではありません。さらに、FirefoxとChromeでは、list-style-typeをnoneに設定しても無視されるようです。

3
TNi

Lu liを使用する代わりにdl (definition list) and ddを使用しました。 <dd>は{color:blue;font-size:1em;}のような標準のcssスタイルを使って定義することができ、htmlタグの後に置くどんな記号でもマーカーとして使うことができます。これはul liのように動作しますが、任意のシンボルを使用することができます。通常はul liで得られるインデントリスト効果を得るためにそれをインデントする必要があります。

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

よりきれいなコードを提供します。そのように、あなたはマーカーとしてどんなタイプのキャラクターでも使うことができました！ indentは-10pxに関するもので、完璧に機能します。

3
Carolyne Comtois

CSS：

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
3
blackchestnut

別の方法：

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}
3
imos

私の解決策は、その中にmdashを追加のspanタグを追加することです。

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

そしてCSSに追加する：

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}
3
Victor Stagurov

ちょっとした試行錯誤の後、li：beforeもcss rule display：inline-blockを必要としていたからです。

それで、これは私にとって完全に有効な答えです。

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}
1
Joery

今日この問題を抱えている人のために、解決策は単純です：

リストスタイル： " - "

1
Bee Bat