Question

我如何在CSS中的餐厅菜单中添加动态“..........”？就像在印刷品中一样，他们拥有整体 “我们的食物是用等等等等....... $ 24.99。”

你会如何在CSS中做到这一点？或者这甚至可能吗？

Answer 1

最好的解决方案是：

<ul>
    <li><p class="food">Chinese 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: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

所以它基本上修复了LI的矩形并在底部画了一个边框，然后价格和食物名称用它们的宽度动态地覆盖它。 YMMV与浏览器，但可能是负边距底部将得到li边框底部被P元素遮挡。

Answer 2

这是可能的，但不是很好的支持。您需要:after伪造选择器和content规则。请参阅此处：http://www.quirksmode.org/css/beforeafter.html请注意，IE获得了很大的F值。

你可以在javascript中完成。或者通过创造性地使用边框类型“点缀”。或者也许是一个重复的背景，正如布鲁克斯建议的那样，通过给出你应用背景颜色以覆盖重复背景的价格和描述，这将起作用。

更新可能会是什么样子：

<ul class="menu">
  <li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>

使用CSS：

.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
  display:block;
  overflow:hidden; //contain the float
  background-image: url(dots.gif);
  background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }

Answer 3

Alex的答案有一个很大的缺点 - .food中的多行文字隐藏了底线。

还有一个很好的旧答案：http://www.search-this.com/2007/11/26/css-a-recipe-for-success/（demo）

这是一个小修改旧解决方案的现场演示（尝试调整大小）：http://cssdesk.com/BqR96

并修改了css：

.restaurant_menu__list {      
  min-width: 320px; /* For mobile devices */
  max-width: 500px; /* Custom max width for readbility */
}

.restaurant_menu__row {
  border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
  position: relative;
  float: left;
  line-height: 1.2em;  

  margin: -.9em 0 0 0;  
  width: 100%;

  text-align: left;  
}

.restaurant_menu__meal span
, .restaurant_menu__price
{
  background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}

.restaurant_menu__meal {
  padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}

.restaurant_menu__meal span {
  margin:0;
    position:relative;
    top: 1.6em;
    padding-right:5px; /* Custom number for space between text and dotted line */
}

.restaurant_menu__price {  
    padding:1px 0 1px 5px;
    position:relative;
    top:.4em;
    left:1px;/* ie6 rounding error*/
    float:right;
}

并修改了html：

<ul class="restaurant_menu__list">

  <li class="restaurant_menu__row">
    <!-- Inside div we need inline element, to handle multiline meals -->
    <div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
    <span class="restaurant_menu__price">€25</span>
  </li>

  <li class="restaurant_menu__row">
    <div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
    <span class="restaurant_menu__price">€32</span>
  </li>

</ul>

Answer 4

这是真正的图形，而不是文本，即使它通常是带有点的ASCII艺术。因此，重复的背景图像可以适当地解决这个问题吗？

菜单描述后添加虚线轨迹

4 个答案: