2011-08-08 6 views
10

私はCSSを初めて使い、リストを扱っています。私はリストをインデントする方法を示して、私はW3Schoolsの上で見たコードのいずれかを使用してみました:それはすべて同じ垂直線上apearsようHTMLとCSSのインデントリスト

<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

</body> 
</html> 

私のCSSはそれをオーバーライドしています。メインのCSSファイルを上書きするためにリストにローカルで使用できるCSSコードはありますか?どんな助けもありがとう。

+0

しかし私はあなたのCSSが表示されません... – BoltClock

+1

@BoltClock:彼の質問仕様に基づいて、私は彼がメインのCSSをローカルでオーバーライドする方法について質問するつもりだったと思います。その場合、彼のメインのCSSは無関係ですが、そうでない場合は、はいです。 –

答えて

13

はい、単にのようなものを使用します。

ul { 
    padding-left: 10px; 
} 

をそして、それは10個のピクセルで連続する各ulバンプます。

Working jsFiddle

0

通常、すべてのリストが縦にとにかく表示されています。だからあなたはそれを水平に表示したいですか?

とにかく、あなたはメインのCSSファイルをオーバーライドし、ローカルにいくつかのCSSを設定するように頼んだ。 <ul>の中でstyle=""とすることはできません。子供には適用されます(<li>)。ローカルであなたのリストを操作する

最も近いものは次のようになります。

<style> 
    li {display: inline-block;} 
</style> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
     <li>Black tea</li> 
     <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 
+0

私は彼がリストをインデントすることを尋ねるとき、水平のアイテムが見たいと思っていたのは間違いです。 –

+0

同じですが、ローカルCSSの例として意味しています。私は非常に疑う、彼は左にパディングを設定したい:10px;あまりにも..? –

10

それはあなたのスタイルのいくつかがリセットされているように聞こえます。ほとんどのブラウザでは、デフォルトで

ul sおよびol sがmarginを持っているとpaddingは彼らに加えます。

この場合はそう

ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST 
    margin:0; 
    padding:0; 
} 

のようなあなたのCSSに行を追加することによって、あなたはこれを上書きすることができます(そして多くがそう)、あなたはこのリストから要素を削除するだろうかのように、バックmargin/paddingを追加しますそう

ul{ 
    margin:1em; 
} 

例:http://jsfiddle.net/jasongennaro/vbMbQ/1/

4

私は、ネストされたリストに、テキストインデントを追加することで、同じ問題を解決しました。

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul id="list2"> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

#list2 
{ 
text-indent:50px; 
} 
+0

よりよい解決策は、マークアップでidまたはclassを使用しないようにすることであり、これを厳密にcssで行うことです。マージンやパディングはより良い選択です。 – Octopus

1

あなたが使用することができます[隣接兄弟コンビネータ] W3 CSSセレクタ勧告で説明したように1 だからあなたはあなたのように、ネストされたulタグにパディングを適用+記号(あるいは~チルダ)を使用することができますあなたの質問に記載され、あなたが必要な結果を得るでしょう。 私はあなたがローカルでメインのCSSをオーバーライドしたいと思っています。インナーulli要素の弾丸を含むネストされます

<style> 
    li+ul {padding-left: 20px;} 
</style> 

この方法: あなたはこれを行うことができます。 これは役に立ちましたかと思います! =