Question

我的目标是创建一个水平价格菜单，其中包含商品和价格之间的破折号，我希望它具有响应性并且看起来很好。我希望在html / css中执行此操作，我可以对其进行硬编码，但它不会那么敏感。

Item ---------------- $180

Answer 1

您尚未提供HTML或现有CSS，但可以使用浮点数和伪元素来实现。

.list {
  min-width: 15em;
}
.first {
  float: left;
  margin-right: 0.5em;
  color: #2B91AF
}
.price {
  float: right;
  margin-left: 0.5em;
  width: 4em;
  text-align: right;
}
.list:after {
  content: '';
  border-bottom: dotted 2px tomato;
  display: block;
  overflow: hidden;
  height: 0.8em;
}

<p class="list">
  <i class='first'>Co-Pay:</i>
  <i class="price">$150.00</i> 
</p>
<p class="list">
  <i class='first'>Pay:</i>
  <i class="price"> $5.00</i> 
</p>
<p class="list">
  <i class='first'>Co-Pay: item</i>
  <i class="price"> $15.00</i> 
</p>
<p class="list">
  <i class='first'>Co-Pay: great deal</i>
  <i class="price"> $1.00</i> 
</p>

Answer 2

设置带有虚线图案的背景，水平重复。然后用浮子把价格放在里面：对;和坚实的背景。为您的商品名称使用纯色背景。

<div style="background:#FFF url(dash.png) repeat-x center center;">
    <span style="background-color:#FFF; float:right;">$15</span>
    <span style="background-color:#FFF;">Item<span>
</div>

水平价格菜单

2 个答案: