web-dev-qa-db-ja.com

箇条書きのない番号なしリストが必要です

番号なしリストを作成しました。番号なしリストの中の箇条書きは煩わしいと感じるので、それらを削除します。

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

2295
praveenjayapal

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

ul {
  list-style-type: none;
}

インデントも同様に削除する場合は、padding: 0およびmargin: 0を追加することもできます。

リスト を参照して、リストのフォーマット手法の優れたチュートリアルを参照してください。

3491
Paul Dixon

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://getbootstrap.com/css/#type-lists

ブートストラップ4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

535
Scott Stafford

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

<ul style="list-style: none;">
    <li> ...</li>
</ul>
199
karim79

CSSでは、スタイル、

 list-style-type: none;
52
Haim Evgi

次のように<ul>要素にスタイルを追加する必要があります。

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

それは弾丸を削除します。前の回答の例のように、スタイルシートにCSSを追加することもできます。

45
DanO

CSSでは...

ul {
   list-style: none;
}
42
Tim Hoolihan

以前の回答を少し改良しました。追加のスクリーン行にあふれた場合に長い行を読みやすくするには、次のようにします。

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

li {padding-left: 2em; text-indent: -2em;}
37
charliehoward

次のCSSを使用してください。

ul {
  list-style-type: none
}
35
Ole Spaarmann

ネイティブ:

ul { list-style-type: none; }

ブートストラップ:

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

注:リストグループを使用している場合は、リストスタイルなしの必要はありません。

18
Cody

<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>
14
Antonio Ooi

箇条書きを削除するために、ulとliの両方にlist-styleを使用しました。箇条書き記号をカスタム文字、この場合は「ダッシュ」に置き換えたいと思いました。それはいい効果をもたらします。それで、このマークアップを使う:

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

このCSSでは:

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;
}

テキストが折り返されているときに機能する、うまくインデントされた効果を与えます。

12
Chris Halcrow

CSS:

.liststyle {
    list-style-type: none;
}

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
6
Jijo Paulose

あなたはこれを試すことができます

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
3
Prince

CSSコード

ul
{
    list-style-type: none;
}

HTMLコード

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>
2
Arun

箇条書き を削除するには、次の _ css _ を使用します。

    ul {
         list-style: none; //or list-style-type:none; 
       }

以下のようなカスタムリストスタイルを追加することもできます。

li:before {
            content: '✔';
            color:red;
          }
2
Novice

これは、箇条書きなしでリストを垂直に並べます。一行で!

li {
    display: block;
}
2
matt

style="list-style-type:none"を使用して箇条書きを削除できます。

これを試して:

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul> 
2
blackbird

pure 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://jsfiddle.net/zumcmvma/2/

ここでの参照: https://www.w3schools.com/tags/tag_dl.asp

1
ShaneB

私は試してみました:

header ul {
   margin: 0;
   padding: 0;
}
1
Dadhich Sourav
 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>
0
Oracular Man

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;
0
Masih Jahangiri

以下のコードは、番号なしリストの行頭文字を削除するための良い簡単な例です。

<!DOCTYPE html>
<html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    </body>
</html>
0
James

Divブロックでulを使っているのであれば

// HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

あなたのスタイルシートで

.some-class ul {
       list-style: none;
}

あなたがクラスやdivブロックを使わずに直接ulを使っているのなら:

//Style Sheet
ul {
    list-style: none;
}
0
Sree Ramana

クラスのlist-style-typeまたはlist-style<li>noneに変更するだけです。

このようなもの:

li {
  list-style-type : none;
}

また、より詳しい情報を得るために、list-style-typeに割り当てることができるすべてのプロパティをリストします。以下のコードを実行して、1つの目標にすべての結果を表示します。

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>
0
Alireza

"箇条書き" を削除するには、 "list-style-type:none;"と設定します。 好き

ul
{
    list-style-type: none;
}

OR

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>
0
Muhammad Awais