显示无序列表，div背景色框在中间

Question

我现在手头很紧。我想对齐无序列表框在中间，但失败了。用尽了一切办法，但就是没能解决它。它在中心区域，但不是死角。我相信我在保证金上做错了什么。我需要一个10px的边距(top &底部)。真的很感激能帮助我的人。

HTML

<div class="lessons">
<h1>Video</h1>
<ul>
        <a href=""><li>
            <h2>Video 1</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </li></a>
        <a href=""><li>
            <h2>Video 3</h2>
            <p>Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
        </li></a>
    </ul>
</div>

CSS

h1
{
text-align:center;
}
.lessons
{
background-color: #e6e7e8;
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom:50px;
}
ul
{
margin:0 auto;
width:50%;
}
li
{
margin:10px;
display: inline-block;
list-style-type: none;
width:285px;
height:200px;
background-color: #fff;
color:#000;
-o-transition: all .2s; /* For Safari 3.1 to 6.0 */
-ms-transition: all .2s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all .2s; /* For Safari 3.1 to 6.0 */
transition: all .2s;
}
li:hover
{
background-color: #ff7765;
color:#fff;
}
li p
{
padding:15px;
font-size:90%;
font-weight: 100;
}

JSFiddle: http://jsfiddle.net/rezasan/x58SG/

Answer 1

小提琴:http://jsfiddle.net/x58SG/1/

我把你的ul CSS改成:

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

ul元素默认为左填充，所以您需要重置它。另外，你的width: 50%对于li来说太窄了，所以它溢出了它的父容器。

为了将来的参考，我发现Chrome的开发工具在调试这些问题时是必不可少的。右键单击该元素并选择"检查元素"。当你将鼠标悬停在选择器上时，chrome会在页面上突出显示它，这样你就可以看到宽度，填充，边距等