2016-04-04 11 views
0

は表示されません。のliタイプは、私は次のCSSを持って

ul { 
padding:0; 
margin:0; 
} 
li { 
padding:0; 
margin:0; 
list-style:none; 
} 
ul.square li { 
padding-left:20px; 
list-style:square; 
} 

と、次のHTML構造:

<ul class="square"> 
<li>blah blah blah</li> 
</ul> 

リストは、パディングなし大手平方なしでアップしています。どうすればこの問題を解決できますか?

+0

に 'リストスタイルをしましょう-left' [** jsfiddle **](http://jsfiddle.net/g2dajjnt/2/) –

+1

また、 'list-style' **は略語です** – Krii

+0

私はそれを表示したくありませんすべてのリスト、ちょうどこれ。したがって、私はCSSで別のul.squareグループを作成しようとしていました。私の最初のコーディングを見てください。私がulに載せれば、この非常に大きなウェブサイトのすべてのリストに影響します。私はul .square ul.squareなどを試しました。正方形も左の余白/余白もいずれも表示されません – Frank

答えて

-1

これだけ作品をolと(ulでそれを試してみましたが、それは動作しません)。正方形をulと一緒に使用することができませんでした。しかし、少なくともこの解決策は、余裕/インデントを追加します。すべての助けをありがとう。 ul` `の`、代わりに `パディングの`マージン-left`を使用し、四角:CSSで

ul { 
padding:0; 
margin:0; 
} 
li { 
padding:0; 
margin:0; 
list-style:none; 
} 
ol.margin { 
padding:0; 
margin: 0; /* reset the margin */ 
margin-left:20px; /* then add yours */ 
} 

はその後、HTMLドキュメント

<ol id="margin"> 
<li>blah</li> 
</ol> 
+0

もちろん 'ul'要素の中でうまく動作します - 正しく行う必要があります(そして、これは' list-style'についての@ Kriiのコメントに注意を払うことから始まりますが、 'list-style-position 'デフォルト値' outside'を取る - そして_that_はあなたが望むマージン/パディングの組み合わせでは機能しません。 – CBroe

1

ここに行く!だけではなく、パディングのマージンを使用 - >Demo

ul.square { 
    padding:0; 
    margin: 0; /* reset the margin */ 
    margin-left:20px; /* then add yours */ 
    list-style: square; 
} 
+0

私はそれがすべてのリストに表示されることを望んでいない、ちょうどこれ。したがって、私はCSSで別のul.squareグループを作成しようとしていました。私の最初のコーディングを見てください。私がulに載せれば、この非常に大きなウェブサイトのすべてのリストに影響します。私はul .square ul.squareなどを試しました。正方形も左の余白/余白もいずれの方法も示していません。 – Frank

+0

ちょっと@フランク、それは 'ul.square'でも使えるはずです。デモをもう一度見てください。 –

+0

はい、私は同意し、アイザックがここにあることがこれを行う最も簡単で簡単な方法であることを確認することができます。 – Mark

関連する問題