rizmaster
@rizmaster

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

961bd097e0ad4b089098f81c0ff952fa.jpg

Как сверстать такое меню? Нужно чтобы были такие же точки между названиями блюд и ценами.
  • Вопрос задан
  • 381 просмотр
Решения вопроса 3
Rimush
@Rimush
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
Ответ написан
sadisme
@sadisme
font-size:30rem
Вариантов куча. Самый простой - фоновая картинка
Ответ написан
Комментировать
@lionkka
Еще вариант border dotted
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Nikulio
@Nikulio
NaN !== NaN
CTRL+H Что бы отключить эти страшные бирюзовые полосы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы