项目之间的点线

Question

餐厅网站和菜单。我需要在菜单项和价格之间得到“点线”。我需要在不手动一一写点的情况下获得它。此功能应自动运行。

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

我在哪里

我需要去的地方

感谢您的提前。

Answer 1

我想你正在寻找这样的东西：

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;
}

小提琴

您可以根据自己的喜好调整宽度。

还有另一种使用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;
}

小提琴

在这里您可以调整内容和字母间距。希望能帮助到你 ：）

Answer 2

您可以使用此代码来生成该行：

    #helper{

    width:200px;
    border: 1px dashed orange;
}

来源： http: //jsfiddle.net/2j9BN/