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

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

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

あなたは、設定することで、箇条書きを削除することができますlist-style-typeしnone（通常は親要素のCSS上で<ul>、たとえば、）：

ul {
  list-style-type: none;
}

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

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

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

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

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

前の回答に対する小さな改良：長い行が追加の画面行にまたがる場合に、それらを読みやすくするには：

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

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

あなたはそれがで動作させることができない場合は<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>

ulとliの両方で箇条書きを削除するためにリストスタイルを使用しました。弾丸をカスタムキャラクター、この場合は「ダッシュ」に置き換えたかったのです。これにより、テキストが折り返されるときに機能する、うまくインデントされた効果が得られます。

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>

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;

純粋な 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

これは箇条書きなしでリストを垂直方向に並べます。たった一行で！

li {
    display: block;
}

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

そのためlist-style: none;、ulまたはliタグでリストのスタイルを変更できない場合は、最初に確認して!importantください。他のスタイル行がスタイルを上書きしている可能性があるためです。

そうでない場合は、li:beforeおそらく内容を確認してください。次に行います：

li:before { dispaly: none; }

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

私は試して観察しました：

header ul {
   margin: 0;
   padding: 0;
}

CSSに頼らずに物事をシンプルに保ちたい場合 は、コード行にを挿入します。すなわち、<table></table>。

ええ、それはいくつかのスペースを残しますが、それは悪いことではありません。