CSS虚线元素效果

我已经设置了一个列表，其中每个列表元素包含两个容器：一个title和一个description容器。我需要的是在每行的底部显示点。CSS虚线元素效果

它在Chrome和Safari中正常工作。但不幸的是，它在Firefox中不起作用。

如何使这个在Firefox也工作有什么建议？

ul.basic { 
    display: table; 
    overflow: hidden; 
} 

ul.basic li { 
    position: relative; 
    display: table-row; 
} 

ul.basic li .title, ul.basic li .description { 
    display: table-cell; 
    background-color: #fff; 
} 

ul.basic li .title { 
    color: #999; 
    position: relative; 
    overflow: hidden; 
    padding-right: 60px; 
} 

ul.basic li .title span { 
    position: relative; 
    z-index: 10; 
    background-color: #fff; 
} 

ul.basic li .title:after { 
    content: '....................................................................... .......................................................................................................................................... ....................................................................................................................................... .............................................................................................................................................................................................'; 
    position: absolute; 
    width: 300%; 
    margin-left: -100%; 
    word-wrap: break-word; 
} 

ul.basic li .description { 
    padding-left: 2px; 
    color: #000; 
}

来源

2014-04-02 enyce12

作为旁注可能是'

'结构可能在语义上更好 – fcalderan

这可能有所帮助：http://stackoverflow.com/questions/8898062/turning-an-unordered-list-into-a-table-of-内容 –

看起来像FF在这种情况下不理解'overflow' **，所以很奇怪，**但是**并不感到惊讶，我很熟悉几乎涉及FF的问题 –

我不得不使用图像在所有浏览器中正确显示所需的结果。

来源

2014-04-22 08:00:05 enyce12

我看到FF和CHrome之间的2种行为真的不同。 Aniway为什么不只是使用一个

border-bottom: 1px dotted;

as css规则为css .description？（如果需要，也可用于.title）

来源

2014-04-02 11:31:52 MrPk

如何处理这种情况如果'title '有多行？使用'border-bottom'将只有一行点。 – enyce12

white-space：nowrap;不要让他们在多行上。如果你不能，正确设计的背景图像会好得多 – MrPk

嗯我不想使用图像...但如果没有其他的可能性... – enyce12

CSS虚线元素效果

回答

相关问题