Question

这可能很容易，但我不确定如何处理它;

我正在建立一个Bootstrap Responsive网站，需要有一个价格表〜你在外卖菜单传单上看到的风格; 它被放置在一个容器中（所以它不是全宽），但理想情况下它应该在桌面屏幕上看起来像这样：

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

然后在平板电脑或手机屏幕上，应该减少点数，所以看起来像这样;

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

有关最佳方法的任何建议吗？而且显然我希望右手边的美元符号排成一列。

Answer 1

很抱歉没有发布我的问题的代码段;

无论如何，我找到了自己的答案 - 我还没有用正确的查询搜索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;
}

HTML＆amp; Pricelist Layout的CSS样式

1 个答案: