Question

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

你可以在这里看到它。

我知道我可以使用css来做到这一点，但我怎么能在这两者之间找到它。

谢谢=）

Answer 1

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

Answer 2

哇，从哪里开始？你拥有的是一些列表，每个列表上面都有标题，有些列表上面和/或下面有注释，所以这是你应该使用的标记：

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

您的class="price"没问题，但class="red"和<strong class="bold">选择不当 - 根据为什么将其命名为红色（如我的“注释”））。使用标题消除了“粗体”使<strong>文本更大的需要。

现在，我放入<span class="separator">所以你可以给出宽度，或者使用浮点数，并允许分隔符空白区域扩展以填充项目和价格之间，你可以用类似< / p>

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

编辑：我同意ClarkeyBoy的评论;限制整体宽度有助于提高可读性，TripWired的链接显示了一些好的方法（并基本上使用了我的建议）

Answer 3

你考虑过这样的事吗？

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

Answer 4

通常情况下我不建议使用表格......但是这种情况很适合表格。

我放弃了虚线，因为它们对可用性非常不利（如果你有一个虚线的页面，它很杂乱，很难跟随每一个 - 你可能会在屏幕上用你的手指像你会菜单 - 不好吃。

相反，为什么不是具有替代行颜色的表，这可能看起来相当不错。然后有一个翻转状态，突出整行，使用户完全明白每个项目的成本。

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

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

祝你好运！

Answer 5

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

.line区段{ 明确：两者; 边距：15像素; background：透明url（img / common / dot.gif）repeat-x scroll 0 0; 高度：的22px; } 。标签{ 背景色：#FFF; 填充右：2px的; 向左飘浮; } 。价钱{ 浮动：权利; 背景色：#FFF; 填充左：2px的; }

Answer 6

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

如果你想在两者之间添加' - '，你可以在中间添加一个额外的列，其中包含' - '或类似的选择。

虚线Html跨度

6 个答案: