css - 如何避免 li 标签中的边距形式 ul？

Question

正如您在Item 1.2我有空间下看到的，如何删除它？

它必须是侧边栏嵌套菜单。

HTML

<div class="sidebar">
<ul>
    <li>
     <a href="#">Item 1</a>
       <ul>
         <li><a href="#">Item 1.1</a></li>
         <li><a href="#">Item 1.2</a></li>
       </ul>    
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>

css

.sidebar {
    background: none repeat scroll 0 0 #F4F4F4;
    float: left;
    min-height: 600px;
    width: 250px;
}


.sidebar ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.sidebar ul li {
    border: 1px solid;
    float: left;
    margin: 0;
    padding: 10px 0;
    width: 100%;
}

.sidebar ul li a {
    margin-left: 5px;
}

a:link, a:active, a:visited {
    border: medium none;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

这里是小提琴css 菜单示例

Answer 1

假设您想要相同的视觉边距/填充：

http://jsfiddle.net/2U4Uv/2/

.sidebar {
    background: none repeat scroll 0 0 #F4F4F4;
    float: left;
    min-height: 600px;
    width: 250px;
}


.sidebar ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.sidebar ul li {
    border: 1px solid;
    float: left;
    margin: 0;
    /*padding: 10px 0;*/
    width: 100%;
}

.sidebar ul li a {
    padding:10px 0;
    display:block;
    margin-left: 5px;
}

a:link, a:active, a:visited {
    border: medium none;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}