web-dev-qa-db-ja.com

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/

htmlcsshtml-lists
155
erjiang

そのコンテンツを相対的に配置された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>
136
BalusC

ここで他の回答をまとめると、箇条書きと<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>のパディングを調整することにより、弾丸とテキストの間にextra水平スペースを好きなだけ追加できます
  • ユーザーがテキストサイズを大きくすると、間隔と行頭文字のサイズは比例して拡大縮小するはずです。

短所：

  • 箇条書きをブラウザのデフォルトよりもテキストに近づけることはできません
  • 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の新しいリストスタイル機能を期待しているので、画像やextaマークアップに頼らずに、よりスマートな箇条書きを作成できます。

110
Joel

これでうまくいくはずです。弾丸を外側に設定してください。 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>
31
Kevin

古い質問ですが、ここでは：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>

乾杯！

12
David Mann

list-style-type：inline：の場合

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

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

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

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

乾杯

10
larshaeuser

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

8
ClosureCowboy

Liでtext-indentを使用するのが最適です。

テキストインデント：-x px;弾丸をliに近づけ、逆も同様です。

IEの古いバージョンでは、スパン上で相対を使用すると、左のマイナスが適切に機能しない場合があります。 P.S-できるだけポジションを与えないでください。

7
Ayush Maheshwari

順不同リストは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>
6
Harish Verma

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
}

間隔がリスト要素の最初の行にのみ影響するように、ブレーク不可スペースを使用します（リスト要素が複数行の長さである場合）。代わりにここでパディングを使用できます。

6
Lucas Demea

古い質問ですが、まだ関連しています。負のtext-indentを使用することをお勧めします。 list-style-positionはoutsideでなければなりません。

長所：

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

短所：

  • 試してみる
  • に
  • 見つける
  • 1 ：）
5
Ilya Novojilov
ul
{
list-style-position:inside;
}

定義と使用法

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

ソース： http://www.w3schools.com/cssref/pr_list-style-position.asp

4
rex

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

この質問 への回答を参照してください

4
Tom Auger

<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>
3
Matthew Mucklo

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

0
Astockwell

箇条書きとテキストの間の間隔を狭くしたい場合は、はるかにきれいな解決策があるようです：

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