CODEWITHSUNDEEP
htmlcss
Christopher Clear
Christopher Clear

Reputation: 91

Horizontal price menu

My goal is to create a horizontal price menu with dashes between the item and the price and I would like it to be responsive and look good doing so. I'm looking to do this in html/css and I can hard code it but it wouldn't be so responsive.

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

Upvotes: 0

Views: 713

Answers (2)

Paulie_D
Paulie_D

Reputation: 115278

You haven't provided the HTML or existing CSS but this can be achieved with floats and pseudo-elements.

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

Upvotes: 4

NGPixel
NGPixel

Reputation: 390

Set a background with a dash pattern, repeating horizontally. Then put the price inside with a float:right; and a solid background. Use a solid background for your item name as well.

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

Upvotes: 0

Related Questions