Question

我正在尝试制作一个宽度为100％的简单垂直对齐菜单。但是，左侧有一些奇怪的填充，阻止菜单拉伸整个100％。

HTML

<div class="sidecontent">
     <nav class="sidemenu">
         <ul>
             <li><a href="#">T-Shirts</a></li>
             <li><a href="#">Long Sleeve T's</a></li>   
             <li><a href="#">Hoodies</a></li>   
             <li><a href="#">Towels</a></li>
             <li><a href="#">Design Your Own</a></li>
         </ul>
     </nav>
 </div>

CSS

div.sidecontent {
    width: 100%;
    background-color: #E6E6E6;
    border-radius: 0 0 10px 10px;
}
nav.sidemenu {
    width: 100%;
}
nav.sidemenu ul {
    list-style-type: none;
    margin: 0;
}
nav.sidemenu ul li {
    width: 100%;
    border-top: 1px solid #999999;
}
nav.sidemenu ul li:first-child {
    border-top: 0;
}
nav.sidemenu ul li:last-child a {
    border-radius: 0 0 10px 10px;
}
nav.sidemenu ul li a:link, nav.sidemenu ul li a:visited {
    display: block;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    font-family: "Trebuchet MS";
    text-decoration: none;
    text-transform: uppercase;
    color: #4C4C4C;
    padding: 28px 0;
}
nav.sidemenu ul li a:hover, nav.sidemenu ul li a:active {
    background-color: #CCCCCC;
}

以下是jsfiddle

Answer 1

Solution
nav.sidemenu ul {
                list-style-type: none;
                margin: 0;
                padding:0;
            }

Answer 2

这是无序列表缩进，请尝试将其添加到您的css：

ul {
list-style:none;
padding-left:0;
}

Answer 3

根据Chrome的HTML检查器，ul对象似乎具有严重隐藏的特征：

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px; //this is what's bothering you
}

因此，您要为padding-left个对象设置0 px到ul：

nav.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0; //this is what I added
}

修正小提琴：http://jsfiddle.net/awcPd/5/

垂直菜单奇怪的填充

3 个答案: