html - CSS を使用して HTML 順不同リストのスタイルを制御する方法は?

Question

基本的には、リストの左側の余白を制御したいと考えています。これが私がそれをどのように構造化したかです：

<li> 
<a href="http://link.com">Main</a> 
<ul> 
    <li> 
        <a href="http://link.com"  title="">Sub1</a>
    </li> 
    <li> 
        <a href="http://link.com"  title="">Sub2</a> 
    </li> 
</ul>
</li>

現在使用しているスタイルでは、サブセクションが右にずれすぎています。どうすれば変更できますか?

Answer 1

私のul「リセット」は次のようになります。

ul { list-style-type: none; margin: 0; padding: 0 }

Answer 2

マージン/パディングを削除するか、少なくとも減らしたい。

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

これにより、メイン セクションのリスト項目と同じになるはずです。好みに合わせて調整してください。

Answer 3

クラス属性をサブリストに追加する必要があります。

<li> 
<a href="http://link.com">Main</a> 
<ul class="sublist"> 
    <li> 
        <a href="http://link.com"  title="">Sub1</a>
    </li> 
    <li> 
        <a href="http://link.com"  title="">Sub2</a> 
    </li> 
</ul>
</li>

そして、このCSSを入れてください：

ul.sublist{
   margin-left:20px;
}