1

我现在处境很紧张。我想将无序列表框对齐在中间但失败了。尝试了所有方法，但没有设法解决它。它不知何故在中心区域，但不是死点。我相信我在边缘做错了什么。但是，我需要 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/

4

1 回答 1

3

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

我将您的ulCSS 更改为：

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

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

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

于 2014-05-01T13:33:11.833 回答