Question

在我的应用程序的一部分中，我有一个部分应该显示产品列表及其价格，总计在底部。目前只是那个...只是一个列表，有点难以阅读。

我想把它搞笑，让它看起来更好。所以我曾经有过一些不同的概念，并认为如果它有点像你在餐馆或商店收到的实际收据，那么它看起来会更好。它很容易阅读，还有很多其他原因。

然而，我似乎遇到了一些麻烦，如何在css中实现这一目标。我理想的目标是文本看起来像这样：

Item ...................... $50.00
Item 2 .................... $50.00
Long Item ................. $50.00
Total ..................... $150.00

显然我会把列表中的最后一项加粗，但我现在并不担心。

为了达到这个效果，我尝试了一些不同的方法，包括尝试使用我之前从未真正玩过的display: table;。如果我使用这个错误，请原谅我。

我的html看起来像这样......我想尝试将其保留为这种格式，因为<ul>实际上不可能插入此代码。

<p>
  <i class='first'>Co-Pay:</i>
  <span></span>
  <i class="price">$</i>
</p>

我尝试过这样的事情

p{
    display: table;
    width: 100%;
}
.first{
    display: table-cell;
}

span{
    border-bottom:1px dotted #000;
    display: table-cell;
}

.price{
    display:table-cell;
}

我也曾尝试使用text-underline，但我无法解决这个问题。

span{
  text-decoration: underline;
  white-space: pre;
}

有更好的方法吗？点或边框底部可以调整到元素之间的空间而不必设置宽度？我真的想摆脱宽度，因为我不知道每个元素的具体宽度。任何帮助都会很棒！

顺便说一句jsFiddle帮忙！ http://jsfiddle.net/5m5t5pcp/

Answer 1

您可以使用浮动特征和块元素填充其间的空间， DEMO 。

HTML测试：

<p class="list">
  <i class='first'>Co-Pay:</i>
  <i class="price">$</i> 
</p>

CSS测试

.first {
  float:left;
  margin-right:1em;
}
.price {
  float:right;
  margin-left:1em;
}
.list:after {
  content:'';
  border-bottom:dotted;
  display:block;
  overflow:hidden;
  height:0.6em;
}

根据您的需要调整高度和边框。（伪元素可以是<span>元素之后的<i>。）

Answer 2

为什么不

.first::after {
  content: '................................................';
]

具有适当的宽度和overflow: hidden？

Answer 3

请参阅jsfiddle中的工作示例：http://jsfiddle.net/carloscalla/ygeu54my/

你应该使用伪选择器：:before来带点。

HTML：

<p>
  <i class='first'>Co-Pay:</i>
  <i class="price">$</i>
</p>

CSS：

p{
    clear: both;
    width: 500px;
    overflow: hidden;
}
p:before{
    float: left;
    width: 0;
    white-space: nowrap;
    content : ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.first{
    background-color: white;
}

.price{
    float: right;
    background-color: white;    
}

Answer 4

这是FIDDLE，其中包含一种可能的解决方案。

有三个不同元素的持有者div - 您可以根据需要调整其宽度。

添加具有大量点的固定位置div，并给出负z-index和overflow: hidden

名称和价格左右浮动

CSS

.lineholder {
    width: 350px;
    border: 0px solid black;
    overflow: hidden;
    position: relative;
}
.name {
    float: left;
    border: 1px solid white;
    background-color: white;
}
.price {
    float: right;
    border: 0px solid gray;
    background-color: white;
}
.dots {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

在css中创建收据样式

4 个答案: