项目之间的点线 [英] Line of dots between items

问题描述

餐厅网站和菜单.我需要在菜单项和价格之间获得点线".我需要不手动逐个编写点的情况下获得它.此功能应自动运行.

Restaurant web site and menu. I need to get "line of dots" between menu item and price. I need to get it without writing dots manually one by one. This feature should work automatically.

是否可以通过使用span或div等背景来创建它?

Is it possible to create this by using background of span or div etc?

我在哪里

我需要去的地方

感谢前进.

推荐答案

我认为您正在寻找类似的东西:

I think you look for something like this:

html

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

css

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

小提琴

您可以按自己喜欢的宽度进行调整.

You can play with width to adjust in your likes.

还有使用css :after

html

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

css

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

小提琴

在这里您可以玩内容和字母间距.希望对您有所帮助:)

Here you can play with content and letter-spacing. Hope it helps :)

这篇关于项目之间的点线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！