Line of points between points

Question

Restaurant website and menu. I need to get a “dot line” between the menu item and the price. I need to get it without manually recording the dots one by one. This function should work automatically.

Is it possible to create this using a span or div background etc.

Where I am

Where do i need to be

Thanks for the promotion.

Answer 1

I think you are looking for something like this:

HTML

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

CSS

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

violin

You can play in width to customize your favorites.

Also used a different approach using css :after

HTML

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

CSS

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

fiddle

Here you can play with content and the interval between letters. Hope this helps :)

Answer 2

div ? ? . , !

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/

Answer 3

- ?

ol li {
  font-size: 20px
}
.dot-div {
  border-bottom: thin dashed gray;
  width: 100%;
  height: 14px
}
.text-div {
  margin-top: -14px
}
.text-span {
  background: #fff;
  padding-right: 5px
}
.pull-right {
  float: right;
  padding-left: 5px
}

<ol>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item one</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item two with long text</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item three midium</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
</ol>

Hide result

JsFiddle

Answer 4

:

    #helper{

    width:200px;
    border: 1px dashed orange;
}

: http://jsfiddle.net/2j9BN/

Answer 5

css .

border: thick dotted;

css. , . , :

border-bottom: thick dotted;

, .

, :

border-bottom: thick dotted orange;

, :)