html - 我的 HR 风格不像预期的那样工作

Question

JSFIDDLE：http: //jsfiddle.net/V7wUv/2/

这是我的 HR 风格：

.page-content hr {
    background-color: #DCDCDC;
    border: 0 none;
    clear: both;
    display: block;
    float: left; <-- take a close look at this
    height: 1px;
    margin: 50px auto; <-- take a close look at this
    max-width: 1120px;
    width: 100%;
}

当我添加时，float:left;我最终可以正常工作，但不能正常工作（它只是一直向左浮动）。margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;

当我删除float:left;左右边距工作（它正确居中）但margin-top: 50px;重叠它上面的元素并且有0px边距。

如果您需要，上面的元素具有这种样式：

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}

我希望我的 HR 居中，上下边距为 50px。

Answer 1

hr {
    border: 0;
    border-bottom: 1px solid #DCDCDC;
    clear: both;
    display: block;
    height: 0;
    margin: 0 auto 50px auto;
    padding-top: 50px;
    max-width: 220px;
    width: 100%;
}