价目表布局的 HTML 和 CSS 样式

Question

这可能很简单，但我不知道如何处理它；

我正在构建一个 Bootstrap 响应式网站，它需要有一个价目表 ~ 你会在外卖菜单传单上看到的样式； 它被放置在一个容器中（因此它不是全宽），但理想情况下它应该在桌面屏幕上看起来像这样：

短.................................................. .... 50 美元
中...................................... 75美元
长................................................. .. 100 美元

那么在平板电脑或手机屏幕上，点的数量应该减少，所以看起来像这样；

短...... $50
中...$75
长...... $100

对解决此问题的最佳方法有什么建议吗？显然我希望右手边的美元符号都排成一行。

Answer 1

很抱歉没有在我的问题中发布代码 sn-p；

无论如何，我找到了自己的答案 - 我只是没有使用正确的查询在 Google 上搜索；

这是我找到（并最终使用）的众多解决方案之一； JS Fiddle Example

HTML 代码：

<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>

CSS 代码：

div{
        height:1em;
    }
    .left,.right{
        padding:1px 0.5em;
        background:#fff;
        float:right;
    }
    .left{
        float:left;
        clear:both;
    }

.dotted{
    border-bottom: 1px dotted grey;
    margin-bottom:2px;
}