箇条書きのない順不同のリストが必要です

2009年06月22日に質問されました。  ·  閲覧回数 2.1M回  ·  ソース

praveenjayapal picture
2009年06月22日

順序なしリストを作成しました。 順不同リストの箇条書きは煩わしいと感じたので削除したいと思います。

箇条書きなしでリストを作成することはできますか?

回答

Paul Dixon picture
2009年06月22日
3789

親要素(通常は<ul> )のCSSでlist-style-typenoneに設定することで、箇条書きを削除できます。次に例を示します。

ul {
  list-style-type: none;
}

インデントも削除したい場合は、それにpadding: 0margin: 0を追加することもできます。

リストのフォーマット手法の優れたウォークスルーについては、 Listutorialを参照してください。

Scott Stafford picture
2013年07月11日
618

Bootstrapを使用している場合、「スタイルなし」クラスがあります。

デフォルトのリストスタイルとリストアイテムの左パディングを削除します(直接の子のみ)。

ブートストラップ2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

ブートストラップ3および4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

ブートストラップ3: http

ブートストラップ4: https

karim79 picture
2009年06月22日
215

list-style: none;を使用する必要があります

<ul style="list-style: none;">
    <li>...</li>
</ul>
charliehoward picture
2012年12月10日
39

前の回答の小さな改良:長い行が追加の画面行に波及した場合に、より読みやすくするために:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}
Antonio Ooi picture
2013年10月08日
15

<ul>レベルで機能させることができない場合は、 list-style-type: none;<li>レベルに配置する必要があります。

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

この繰り返しを回避するためにCSSクラスを作成できます。

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

必要に応じて、 !important使用します。

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>
Chris Halcrow picture
2013年09月17日
14

箇条書きを削除するために、ulとliの両方でlist-styleを使用しました。 弾丸をカスタム文字(この場合は「ダッシュ」)に置き換えたいと思いました。 これにより、テキストが折り返されているときに正常に機能する、うまくインデントされた効果が得られます。

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}
<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>
Masih Jahangiri picture
2019年04月23日
5

ulデフォルトスタイルを完全に削除するには:

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
ShaneB picture
2018年03月23日
4

純粋なHTMLだけでこれを実現したい場合、このソリューションはすべての主要なブラウザーで機能します。

説明リスト

次のHTMLを使用するだけです。

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

これにより、次のようなリストが作成されます。

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

ここでの例: https

ここでの参照: https

matt picture
2016年09月03日
2

これにより、箇条書きなしでリストが垂直方向に並べ替えられます。 たった一行で!

li {
    display: block;
}
Ali_Hr picture
2020年01月27日
1

既存のテーマを開発している場合は、テーマにカスタムリストスタイルがある可能性があります。

したがって、ulタグまたはliタグでlist-style: none;を使用してリストスタイルを変更できない場合は、最初に!importantで確認してください。これは、他のスタイル行がスタイルを上書きしている可能性があるためです。 !important修正された場合は、より具体的なセレクターを見つけて、 !importantをクリアする必要があります。

li {
    list-style: none !important;
}

そうでない場合は、 li:before確認してください。 コンテンツが含まれている場合は、次のようにします。

li:before {
    display: none;
}