Как сделать такое меню с блюдами?

Question

[rizmaster]

Как сверстать такое меню? Нужно чтобы были такие же точки между названиями блюд и ценами.

Answer 1

[Илья]

HTML:

<div>
  <span>товар</span>
  <span>описание</span>
  <span>100руб</span>  
</div>
<div>
  <span>товар</span>
  <span>описание</span>
  <span>100руб</span>  
</div>
<div>
  <span>товар</span>
  <span>описание</span>
  <span>100руб</span>  
</div>
<div>
  <span>товар</span>
  <span>описание</span>
  <span>100руб</span>  
</div>

CSS:

div {
  border-bottom: 1px dotted #000;
  width: 100%;
  height: 20px;
  margin-bottom: 30px;
  position: relative;
}
div span {
  background:  #fff;
  position: absolute;
  left: 0px;
  top: 7px;
}
div span + span {
  background:  none;
  position: absolute;
  left: 0px;
  top: 25px;
}
div span + span + span {
  background:  #fff;
  position: absolute;
  left: auto;
  right: 0px;
  top: 7px;
}

Пример:
codepen.io/Rimush/pen/bwNoQx

Comments

[rizmaster]

спасибо большое

Answer 2

[Андрей Верх]

Вариантов куча. Самый простой - фоновая картинка

Answer 3

[lionkka]

Еще вариант border dotted

Answer 4

[Nikita Shchypylov]

CTRL+H Что бы отключить эти страшные бирюзовые полосы

Comments

[rizmaster]

Да это скрин с фотошопа, знаю как убрать, как это меню сверстать в html. Никак не соображу просто.