在菜单描述后添加虚线 [英] Adding a dotted line trail after menu description

问题描述

如何在CSS中的餐厅菜单中添加动态..........？像在印刷的，他们有整个
我们的食物是由blah blah blah ............. $ 24.99。

<你会怎么做在CSS？

解决方案

最好的解决方案是：

 < ul> 
< li>< p class =food>中餐< / p>< p class =price> $ 5.99< / p>< / li> 
< / ul> 
 

然后CSS匹配（未测试，但可以调整以获得效果）

  li {
 width：300px; 
 height：20px; 
 border-bottom：1px dotted black; 
 background-color：white; 
} 
 
 .food，.price {
 height：22px; // key：只比LI高一点b 
 background-color：white; 
} 
 
 .food {
 float：left; 
} 
 
 .price {
 float：right; 
} 
  

所以它基本上修复了LI的矩形， ，那么价格和食物名称动态地覆盖它们的宽度。 YMMV具有浏览器，但也许负边距底部将获得由p元素确定的li边界底部。

How would I go about adding a dynamic ".........." to a restaurant menu in CSS? Like in printed ones they have the whole "our food is made of blah blah blah.............$24.99."

How would you do that in CSS? Or is this even possible?

解决方案

The best solution is this:

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

then CSS to match (untested, but tweakable to get the effect)

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food, .price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.

这篇关于在菜单描述后添加虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！