Question

我现在情况紧张。我想将无序列表框对齐到中间但失败了。尝试了所有手段，但只是没有设法解决它。它不知何故在中心区域但不是死亡中心。我相信我做了一些错误。我需要10px的余量（顶部和底部）。真的很感激能帮助我的人。

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%的{{1}}太窄了，因此它的父容器溢出了。

为了将来参考，我发现Chrome的开发人员工具在调试这些问题时非常重要。右键单击元素并选择＆＃34;检查元素＆＃34;。当您将鼠标悬停在选择器上时，Chrome会在页面上突出显示它，以便您可以看到宽度，填充，边距等。

显示无序列表，div背景颜色框位于中间

1 个答案: