web-dev-qa-db-ja.com

リスト項目の箇条書きとテキストの間のギャップを減らす

<li>内の箇条書きとテキストのデフォルトのギャップを減らすにはどうすればよいですか？

  • アイテム1
  • アイテム2
  • アイテム3

箇条書きと「I」のギャップを減らしたい。

csshtml-lists
61
Jitendra Vyas

これが最善の方法であるかどうかはわかりませんが、負の text-indent ：

li {
    text-indent: -4px;
}

... HTMLコードは次のようになります。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

（Safari 4.0.4およびFirefox 3.0.11。でテスト済み）

31
Steve Harrison

これを実現するには、list-style-typeをnoneに設定し、background-imageのように、リスト要素を一般的な箇条書きにします。

ul {
    list-style-type: none;
}

li {
    background-image: url(bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 7px;
}

結果は次のようになります。

alt text

このアプローチでは、不要なspan（または他の）要素をリストに追加することはありません。これは、おそらくより実用的です（後の拡張性やその他のセマンティック上の理由から）。

30
gpmcadam

以下を試すことができます。ただし、<span>要素を<li>要素内に配置する必要があります

<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;

}
</style>
</head>

<body>

<ul class="a">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Coca Cola</span></li>
</ul>
</body>
</html>
21
Jaime Garcia

私はこれらのソリューションと提供された他のソリューションを試しましたが、実際には機能しませんが、これを行う方法を見つけたようです。それは弾丸を削除し、：before擬似要素を使用してUnicode弾丸を入れることですその場所。次に、リストアイテムと箇条書きの間隔を調整できます。 Unicodeを使用して、エンティティを：beforeまたは：afterのコンテンツプロパティに挿入する必要があります-HTMLエンティティは機能しません。

Unicodeの箇条書きにはデフォルトでピンヘッドのサイズが表示されるため、いくつかのサイズ変更と配置のコードも必要です。そのため、弾丸は所定の位置に収まるように拡大し、絶対に配置する必要があります。リストアイテムのフォントサイズを変更しても、リストアイテムとの箇条書きの関係が一定になるように、箇条書きのサイズと位置にemsを使用していることに注意してください。コード内のコメントは、すべてがどのように機能するかを説明しています。別のエンティティを使用する場合は、ここでUnicodeエンティティのリストを見つけることができます。

http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

このページの表の右端の列（8進数）の値を使用します-必要なのは\と数字だけです。他のエンティティを使用可能なサイズで表示しているように見えるため、他のエンティティを使用する場合、：beforeルールのコンテンツプロパティを除くすべてを破棄できます。私にメールしてください：stylinwithcssのチャールズは、考えやコメントをドットコムで送信します。 Firefox、ChromeとSafariをテストしましたが、うまく動作します。

    body {
      font-family:"Trebuchet MS", sans-serif;
      }
    li  {
      font-size:14px;        /* set font size of list item and bullet here */
      list-style-type:none; /* removes default bullet */
      position:relative;      /* positioning context for bullet */
      }
      li:before  {
        content:"\2219";    /* escaped unicode character */
        font-size:2.5em;    /* the default unicode bullet size is very small */
        line-height:0;        /* kills huge line height on resized bullet */
        position:absolute;  /* position bullet relative to list item */
        top:.23em;           /* vertical align bullet position relative to list item */
        left:-.5em;            /* position the bullet L- R relative to list item */
       }
20
Charles Wyke-Smith

すべてのliにテキストの行が1行しかない場合は、liにテキストのインデントを付けることができます。このような ：

ul {
  list-style: disc;
}
ul li {
   text-indent: 5px;
}

または

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}
6
Bogdana Zadic

これは一つの方法です。

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
4
mark123

これをインラインで行う必要があり、上記のいくつかを組み合わせて適切に機能するようにしました。私はdiv内で作業しており、画像を使用したい：

ULの下のパディングは、箇条書きのdivの左マージンから開始する場所を示しています。アクセシビリティを向上させるためにemを使用していますが、pxも使用できます。 pxであまり動かないようであれば、もっと大きなpx値を使用します（私にとっては、cmで動かすだけで60pxでした！）。

テキストインデントは、箇条書きに、テキストの近くにどれだけ近づくかを伝えます。

それがあなたのために働くことを願っています！ :)

2
libellus

text-indentを負の数に減らして、リスト項目の箇条書きとそのテキストの間のスペースを減らします。

li {
  text-indent: -4px;
}

margin-leftを使用して、リスト項目の箇条書きとその周囲の要素の端の間のスペースを調整することもできます。

li {
  margin-left: 24px;
}

text-indentとpadding-leftは両方とも追加行頭文字とテキストの間にスペースを入れることができますが、スペースを負に減らすことができるのはtext-indentだけです。

li {padding-left：-4px; }/*動作しません。 * /
2
jtheletter

方法は次のとおりです。

このようにすると、複数行は完全に機能します。行頭文字は自動的にテキストに合わせてサイズ調整されます。インデントは簡単です：それはただpadding-left上のli。最小限のCSSが必要です。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul > li {
  position: relative;
  padding-left: 12px;
}
ul > li:before {
  content: "•";
  position: absolute;
  left: 0;
}
div {
  border: 1px solid #ccc;
}
<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
    <li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
    <li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
  </ul>
</div>
1
mpen

私が持っています <a>内<li>s。

<ul>要素、次のCSSを適用します。

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

<a>要素、次のCSSを適用します。

a:before {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

これにより、箇条書きの擬似要素が作成されます。他の要素と同様にスタイルを設定できます。

ここに実装しました： http://www.cssdesk.com/R2AvX

1
Hitesh

フィドルと一緒に行く：

[〜＃〜] fiddle [〜＃〜]

HTML：

<ol>
        <li>List 1          
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 2
            <ol>
                <li>Sub-Chapter</li>
                <li>Sub-Chapter</li>
            </ol>
        </li>
        <li>List 3</li>
</ol>

CSS：

ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
1
Reddy

さらに別の方法があります。

  1. 各liに2つのdivを追加します。1つは箇条書き用、もう1つはテキスト用です。
  2. 箇条書きの_に箇条書き文字•（またはあなたが好きなもの、Unicodeにはたくさんあります）を入れてください。テキストをテキストdivに入れます。
  3. 各liをdisplay:flexに設定します。

長所：

  • 追加する追加の箇条書き画像はありません。
  • 負のマージンなどはありませんが、親の外に出ることはありません。
  • フレックスボックスをサポートする任意のブラウザーで動作します。
  • 複数行アイテムの適切なインデント。
  • 箇条書き文字を使用すると、箇条書きは常にテキストに対して適切に垂直に配置され、微調整は必要ありません。

短所：

  • 追加の要素が必要です。

また、すべての余分なdivをコーディングしたくない場合は、通常のリストを作成してから、この関数を実行して変換し、ulをパラメーターとして渡すことができます。

function fixList (theList) {
  theList.find('li').each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}

例：

li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex; /* set to desired spacing */
}
<ul>
  <li><div>•</div><div>First list item.</div>
  <li><div>•</div><div>Second list item.<br>It's on two lines.</div>
  <li><div>•</div><div>Third <i>list</i> item.</div>
</ul>

関数を使用した例を次に示します。

fixList($('ul'));

function fixList (theList) {
  $('li', theList).each(function (_, li) {
    li = $(li);
    $('<div/>').html(li.html()).appendTo(li.empty());
    $('<div/>').text('•').prependTo(li);
  });
}
li {
  font-family: sans-serif;
  list-style-type: none;
  display: flex;
}

li > div:first-child {
  margin-right: 0.75ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>
0
Jason C

望みの外観を実現するために、基本的なULと複数のLIを含むdivを作成しました。上記の提案のいずれかを使用して、箇条書きとテキストの間のインデントを簡単に調整できませんでした（技術的には可能ですが、単純ではありません）。リスト機能（list-style-type: none）なしでULとLIをそのままにして、 &bull;を各行の先頭に。最初は少し問題がありましたが、最初の箇条書きだけが表示されていたので、最初の行の最後に箇条書きの文字を追加し、更新してから削除して、すべてポップアップしました。大きなインデントが必要ない場合は手動で箇条書きのHTMLエンティティを追加し、スペースが必要な場合はスペースのHTMLエンティティを追加します：o最適な方法ではないことはわかっていますが、うまくいきました。

0
Keiome