html - 消失的 <li> 内容。交替

Question

下面的CSS和HTML代码生成

News
Interviews
----------------------
Djing
Break dance
----------------------

为什么横线消失了？

每个<li>的高度更改为 53px，但没有达到所需的效果。 如果<hr>插入而不是 <div> horizo​​ntal_line_rule，它总是出现。

div#footer{
    /*font-family: PTSerifNarrow, sans-serif;*/
    /*background-color: #e6e6e6;*/
    background-color: #050505;
    height: 23.75em;
    clear: both;
}
div#footer a{
    color: inherit;
}
div#footer span{
    color: #8f8f8f;
}
/* 9.03.2014. Edited. */
div#footer > div#footer-container{
    padding: 0 6.875em;
    /*padding-top: 1.312em;*/
    padding-top: 2.624em;
    padding-right: 1.312em; 
    width: 1380px;
    background-color: #050505;
}
div#footer-container > ul > li{
    display: block; 
    color: white;
    font-family: Proxima Nova, sans-serif;
    font-size: 11px;
}
div.horizontal_line_rule{
    clear: both;
    width: 10%;
    background-color: #696969;
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier. */
    height: 0.5px;
    margin-top: 10px;
    margin-bottom: 10px;
}
div#footer-container > ul > li > a {
    text-decoration: none;
}

<div id = "footer">
    <div id = "footer-container">
        <ul>
        <li>
            <a href="/">News</a>
            <div class = "horizontal_line_rule"></div>
        </li>
        <li>
            <a href="../interviews">Interviews</a>
            <div class = "horizontal_line_rule"></div>
        </li>
        <li>
            <a href="../djing">Djing</a>
            <div class = "horizontal_line_rule"></div>
        </li>
        <li>
            <a href="../break-dance">Break dance</a>
            <div class = "horizontal_line_rule"></div>
        </li>
        </ul>
    </div>
</div>

另外，如何在一行中显示多个这样的列表？

Answer 1

我在这里不是 100% 确定，但我高度怀疑这是因为您要求半像素高度。根据定义，PC 可以显示的最小像素是一个像素，因此它确实无法满足您的要求，您可能会得到 1px 或 0px，具体取决于您无法控制的舍入和背景逻辑。

将它调高到 1px，它应该会更一致。如果您不希望它看起来那么结实，则必须使用浅灰色，因为它不能做半个像素。