番号なしリストを作成しました。番号なしリストの中の箇条書きは煩わしいと感じるので、それらを削除します。
箇条書きなしでリストを作成することは可能ですか?
次の例のように、親要素のCSSで list-style-type
をnone
に設定することにより、箇条書きを削除できます(通常:<ul>
)。
ul {
list-style-type: none;
}
インデントも同様に削除する場合は、padding: 0
およびmargin: 0
を追加することもできます。
リスト を参照して、リストのフォーマット手法の優れたチュートリアルを参照してください。
Bootstrapを使用している場合は、「スタイルなし」クラスがあります。
デフォルトのリストスタイルとリストアイテムの左パディングを削除します(直系の子供のみ)。
<ul class="unstyled">
<li>...</li>
</ul>
http://Twitter.github.io/bootstrap/base-css.html#typography
<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>
CSSでは、スタイル、
list-style-type: none;
次のように<ul>
要素にスタイルを追加する必要があります。
<ul style="list-style: none; ">
<li>Item</li>
...
<li>Item</li>
</ul>
それは弾丸を削除します。前の回答の例のように、スタイルシートにCSSを追加することもできます。
CSSでは...
ul {
list-style: none;
}
以前の回答を少し改良しました。追加のスクリーン行にあふれた場合に長い行を読みやすくするには、次のようにします。
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
次のCSSを使用してください。
ul {
list-style-type: none
}
ネイティブ:
ul { list-style-type: none; }
ブートストラップ:
<ul class="list-unstyled list-group">
<li class="list-group-item">...</li>
</ul>
注:リストグループを使用している場合は、リストスタイルなしの必要はありません。
<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の両方に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;
}
テキストが折り返されているときに機能する、うまくインデントされた効果を与えます。
CSS:
.liststyle {
list-style-type: none;
}
HTML:
<ul class="liststyle">
<li>Test</li>
</ul>
あなたはこれを試すことができます
ul {
list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
ul
{
list-style-type: none;
}
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
箇条書き を削除するには、次の _ css _ を使用します。
ul {
list-style: none; //or list-style-type:none;
}
以下のようなカスタムリストスタイルを追加することもできます。
li:before {
content: '✔';
color:red;
}
これは、箇条書きなしでリストを垂直に並べます。一行で!
li {
display: block;
}
style="list-style-type:none"
を使用して箇条書きを削除できます。
これを試して:
<ul style="list-style-type:none" >
<li>op1</li>
<li>op2</li>
<li>op2</li>
</ul>
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
私は試してみました:
header ul {
margin: 0;
padding: 0;
}
<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>
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;
以下のコードは、番号なしリストの行頭文字を削除するための良い簡単な例です。
<!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>
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;
}
クラスの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>
"箇条書き" を削除するには、 "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>