Question

下面的CSS和HTML代码生成

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

为什么水平线会消失？

每个<li>的高度更改为53px，但没有达到所需的效果。如果插入了<hr>而不是<div> horizontal_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

<强> DEMO

对height: 1px;

使用.horizontal_line_rule

而不是0.5px

Answer 2

我不是100％肯定在这里，但我非常怀疑这是因为你要求半像素高度。根据定义，PC可以显示的最小像素是一个像素，因此它实际上无法满足您的要求，并且您可能获得1px或0px，具体取决于舍入和放大。你无法控制的背景逻辑。

将其调高至1px，它应该更加一致。如果你不希望它看起来那么坚固你就必须采用浅灰色，因为它不能做半个像素。

Answer 3

为了清理代码，您可以考虑只向需要它的任何border-bottom添加一个可靠的1px li类。只是一个建议。

消失<li>内容。交替</LI>

3 个答案: