菜单样式“....” - 填写句点

时间:2011-09-02 00:12:41

标签: jquery xhtml css3

我一直试图找到创建“.....”效果的最佳方式,就像在晚餐菜单中一样:http://cl.ly/0g263j04322m3F140D40

不确定是否必须自己添加句点或者是否有办法让jQuery或CSS3填充它。只是好奇。

关于我能做什么的任何想法?或者回到旧时尚的方式来增加时期。

3 个答案:

答案 0 :(得分:3)

您可以使用旧的CSS border-style: dottedfloat这两个元素。只需使两个元素两侧都有不透明的背景和边框来隐藏虚线边框。见这里的例子:

http://jsfiddle.net/7BtYC/

注意:CSS3提供border-image,可用于提供比标准虚线边框更好看的效果。

答案 1 :(得分:3)

尝试this CSS2 solution

HTML:

<ul> 
    <li><span>Soup</span><span>€ 2.99</span></li>
    <li><span>Ice cream</span><span>€ 5.99</span></li>
    <li><span>Steak</span><span>€ 20.99</span></li>
</ul>

CSS:

ul {
    width: 400px;
    list-style: none;
}
li {
    border-bottom: 2px dotted black;
    height: 20px;
    margin-bottom: 6px;
}
li span {
    position: relative;
    top: 6px;
    float: left;
    clear: right;
    background: white;
    height: 26px;
}
li span+span {
    float: right;
}

答案 2 :(得分:1)

有一种使用图像作为省略号的解决方案。你可以用JavaScript做到这一点,但这是我能想到的唯一的CSS方式。演示here

你需要做的是给一个容器元素一个重复的点背景,然后它上面的任何元素都有一个不透明的背景;这将隐藏点,给出一个不错的效果。实验是关键。

代码如下:

HTML

<div>
    <strong>Big plate o' food</strong><span>1 million money</span>
</div>

CSS

div
{
    background: url('http://media.avclub.com/images/auth/user/57461/ellipsis_png_35x42_crop_q85.jpg') repeat-x;
}

strong, span
{
    background: white;
}

span
{
    float: right;
}

请注意我在椭圆上使用了一个非常糟糕的图像;你可以做得更好。