3

我在这里有一个用 html 编码的菜单，但我需要一条虚线来跨越名称和价格，我将如何在这里做呢？我有点迷路了哈哈。

在这里你可以看到它。

http://mystycs.com/menu/menuiframe.htm

我知道我可以使用 css 来做到这一点，但我将如何在这两者之间实现它。

谢谢 =)

4

6 回答 6

6 
<style type="text/css">
 .menugroup{
    width:100%;
 }    


 .itemlist{
        list-style-type: none;
 }

 .seperator{
        margin: 5px; 
        width:50%; 
        border-bottom: 1px dotted #000
 }

</style>


<div class="menugroup">

   <ul class="itemlist">
      <li>item name<span class="seperator"></span>price</li>
   </ul>

</div>
于 2010-10-12T20:20:55.727 回答
3

Wow, where to start? What you have is a number of lists with headers above each, some with notes above and/or below, so that's the markup you should be using:

<h2>Egg Platters</h2>
<div class="note">Served With Home Fries &amp; Toast</div>
<ul>
    <li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
  (etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>

Your class="price" is fine, but class="red" and <strong class="bold"> are poor choices -- name the class based on why it's red (like my "note"). Using headings eliminates the need for "bold" to make the <strong> text bigger.

Now, I put in the <span class="separator"> so you could give widths, or use floats, and allow the separator blank space to expand to fill between the item and the price, and you could style it with something like

.separator {
    border-bottom: 1px dotted #333;
}

EDIT: I agree with ClarkeyBoy's comment too; limiting the overall width would help readability, and TripWired's link shows some good method (and uses essentially what I was suggesting)

于 2010-10-12T20:37:03.643 回答
2

通常我不建议使用桌子……但这种情况很适合桌子。

我会放弃虚线，因为它们对可用性非常不利（如果您有一页虚线，那么它会非常混乱且难以遵循每一条线 - 您可能会像使用手指一样在屏幕上使用菜单 - 不好）。

相反，为什么不使用交替行颜色的表格，这可能看起来很不错。然后有一个翻转状态会突出显示整行，让用户完全清楚每个项目的成本。

这里有一个很好的示例教程和代码（参见示例 3）： http ://bit.ly/9jTnAx

代码位于页面底部，几乎只是从您的末尾复制粘贴。

祝你好运！

于 2010-10-13T00:38:30.500 回答
2

Have you considered something like this?

http://5thirtyone.com/archives/776

于 2010-10-12T20:36:20.643 回答
1

我会在整行上使用背景 x 重复的 .gif 并在浮动左侧项目名称和浮动右侧项目价格上用白色 bg 颜色隐藏它。

.line{ 明确：两者；边距底部：15px；背景：透明网址（img/common/dot.gif）重复-x滚动0 0；高度：22px；} .label{ 背景颜色：#FFF; 填充右：2px；向左飘浮; } .price{ 浮动：对；背景颜色：#FFF；填充左：2px；}

于 2011-04-15T03:30:03.387 回答
0 
<style>
    table th, td{
    border-bottom: 1px dotted #CCCCCC;
}

HTML代码块：

<h3>Current House Trends</h3>
<table class="table" border="0">
<tbody>
<tr>
    <th>Price</th>
    <td>$500,000</td>
</tr>
<tr>
    <th>Market</th>
    <td>78</td>

如果您想在中间添加“-”，您可以在中间添加一个额外的列，其中包含“-”或您选择的类似内容。

于 2012-10-20T02:42:20.550 回答