CSS：箇条書きと<li>の間のスペースを制御する

またはで、弾丸がどれだけの水平方向のスペースを<li>右に押すかを制御したいと思います。<ol><ul>

つまり、常に持っている代わりに

*  Some list text goes
   here.

それを変えられるようにしたい

*         Some list text goes
          here.

または

*Some list text goes
 here.

見回したが、ブロック全体を左または右にシフトするための指示しか見つかりませんでした。たとえば、http：//www.alistapart.com/articles/taminglists/

span相対的に配置されているにコンテンツを配置すると、のleftプロパティによってスペースを制御できますspan。

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

ここで他の回答を要約すると、箇条書きと<li>リストアイテムのテキストの間のスペースをより細かく制御したい場合、オプションは次のとおりです。

（1）背景画像を使用する：

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

利点：

• 弾丸に好きな画像を使用できます
• CSS background-positionを使用して、ピクセル、ems、または％を使用して、テキストに対して画像を配置することができます。

短所：

• ページに余分な（ただし小さい）画像ファイルを追加し、ページの重みを増やします
• ユーザーがブラウザのテキストサイズを大きくすると、箇条書きは元のサイズのままになります。また、テキストサイズが大きくなると、位置がずれる可能性があります。
• 幅のパーセンテージのみを使用して「レスポンシブ」レイアウトを開発している場合、画面の幅の範囲全体で、必要な場所に箇条書きを正確に取得することが難しい場合があります。

2. <li>タグにパディングを使用する

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

利点：

• 画像なし=ダウンロードするファイルが1つ少ない
• のパディングを調整することで、箇条書きとテキストの間に必要なだけの水平スペースを<li>追加できます。
• ユーザーがテキストサイズを大きくすると、間隔と箇条書きのサイズが比例して拡大するはずです。

短所：

• 箇条書きをブラウザのデフォルトよりテキストに近づけることはできません
• CSSの組み込みの弾丸タイプの形状とサイズに限定
• 箇条書きはテキストと同じ色にする必要があります
• 弾丸の垂直方向の配置を制御できない

（3）テキストを追加の<span>要素で囲む

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

利点：

• 画像なし=ダウンロードするファイルが1つ少ない
• オプション（2）よりも箇条書きの位置をより詳細に制御できます–箇条書きをテキストに近づけることができます（ただし、私の最善の努力にもかかわらずpadding-top、<span>。他の誰かがただし、これの回避策...）
• 弾丸はテキストとは異なる色にすることができます
• ユーザーがテキストサイズを大きくする場合、箇条書きは比例して拡大する必要があります（pxでなくemsでパディングとマージンを設定した場合）

短所：

• 余分な非セマンティック要素が必要です（これにより、実際の生活よりもSOの方が友を失う可能性があります;）しかし、コードを可能な限り無駄のない効率的なものにしたい人にとっては煩わしく、プレゼンテーションとコンテンツの分離に違反します。そのHTML / CSSは提供することになっています）
• 弾丸のサイズと形を制御できない

ここでは、CSS4の新しいリストスタイルの機能を期待しています。これにより、画像やエクスタマークアップに頼らずに、よりスマートな箇条書きを作成できます。

これでうまくいくはずです。弾丸は必ず外側に向けてください。IE7にそれらをドロップできる場合は、CSS疑似要素を使用することもできます。この種のことには疑似要素を使用することはお勧めしませんが、距離を制御するために機能します。

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

古い質問ですが、：before疑似要素はここでうまく機能します。

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

それは本当にうまく機能し、多くの追加のルールやhtmlを必要としません。

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

乾杯！

以下のためのlist-style-タイプ：インライン：

これはDSMann8の回答とほとんど同じですが、CSSコードが少なくなっています。

あなたはただする必要があります

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

乾杯

padding-left（リスト自体ではなく）リスト項目で属性を使用できます。

liでテキストインデントを使用するのが最適です。

text-indent：-x px; 弾丸をliに近づけ、逆も同様です。

スパンで相対を使用すると、IEの古いバージョンでは負の左が正しく機能しない場合があります。PS-できるだけ多くのポジションを与えないでください。

これは、cssカウンターと疑似要素を使用した別のソリューションです。追加のhtmlマークアップやcssクラスを使用する必要がないので、よりエレガントだと思います。

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

分割できないスペースを使用して、スペースがリスト要素の最初の行にのみ影響するようにします（リスト要素が複数行の場合）。代わりにここでパディングを使用できます。

古い質問ですが、まだ関連があります。ネガティブの使用をお勧めしtext-indentます。 list-style-positionでなければなりませんoutside。

長所：

• 弾丸は適切に自動的に配置されます
• フォントサイズを変更しても箇条書きの位置が崩れない
• 余分な要素はありません（:: pseudo-elementsもありません）
• CSSを変更することなく、RTLとLTRの両方で機能します。

短所：

• 試す
• に
• 見つける
• 1 ：）

順不同リストはulタグで始まります。各リストアイテムは、デフォルトで始まります。リストアイテムには、デフォルトで黒丸（小さな黒い円）が付けられます。

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

出力：

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

text-indentプロパティは、テキストブロックの最初の行のインデントを指定します。
注：負の値を使用できます。値が負の場合、最初の行は左にインデントされます。

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>タグのパディングを使用して、（ある程度）間隔を制御できるようです。

<style type="text/css">
    li { padding-left: 10px; }
</style>

キャッチは、それがあなたの最後の例のようにすっかり引っ張ることができないように見えることです。

そのためには、list-style-typeをオフにして＆bull;を使用してみてください。

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

箇条書きとテキストの間隔を狭くしたいだけなら、もっとすっきりした解決策があるようです。

li:before {
    content: "";
    margin-left: -0.5rem;
}

代替として背景画像の置換を使用して、垂直方向と水平方向の配置を完全に制御することもできます。

この質問の答えを見る

ul
{
list-style-position:inside;
} 

定義と使用法

list-style-positionプロパティは、リスト項目マーカーをコンテンツフローの内側または外側のどちらに表示するかを指定します。

出典：http : //www.w3schools.com/cssref/pr_list-style-position.asp

ul li:beforeとの背景画像を使用position: relativeしposition:absoluteて、liとli:beforeにそれぞれとを割り当てることができます。このようにして、イメージを作成し、liを基準にして好きな場所に配置できます。

タグに使用padding-left:1em; text-indent:-1emし<li>ます。
その後、list-style-position: inside用<ul>タグ。

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

次の解決策は、テキストを箇条書きに近づけたい場合や、複数行のテキストがある場合でも適切に機能します。

margin-right テキストを箇条書きに近づけることができます

text-indent 複数行のテキストが正しく整列することを保証します

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

<span style="display: flex;">それぞれの中で使用します<li>。