ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Как адекватно сверстать список в с многоточием между item?

Всем привет.
Недавно меня настигла такая подстава в макете:
11b4046314c44229bac43cfa2efe8b0c.png

Реализовал я это, конечно, через background-color, заданный самой глубокой обёртке текста span. Подстава в том, что на следующем макете родительские item чередуются и приходится переназначать стили, задавая модификатор в таблице, так как одна таблица на белом фоне, другая на сером.

87cb80dc47dc479c8f9e23c36d45088c.png

Заблаговременно (ещё до того как понял, что во втором макете границы нет =D) накидал костыль на coffee, чтоб переназначить цвет в span.

cartable = ->
moduleName = 'cartable'
module = $ ".#{moduleName}"
carlistOdd = module.find ".carlist__autocard--#{moduleName}:nth-of-type(odd)"
carlistEven = module.find ".carlist__autocard--#{moduleName}:nth-of-type(even)"

modifyTable = (module, modificator)->
module.each ->
thisList = $ this
thisTable = thisList.find ".table"
thisTable.addClass "table--#{modificator}"

modifyTable(carlistOdd, 'white')
modifyTable(carlistEven, 'gray')
module.exports = cartable;


И всё же мучает академический интерес - есть ли способ решить вопрос с вёрсткой подобного компонента без грубой заливки верхнего элемента? т.е на css это всё как то сделать а костыль убрать в ящик...
PS. гуглить пробовал - предлагают в принципе только тот вариант, что мне в голову и пришёл...
jsfiddle.net/L2ya3buj
codius.ru/articles/%D0%9A%D0%B0%D0%BA_%D1%81%D0%B2...
xiper.net/collect/html-and-css-tricks/content/tabl...
  • Вопрос задан
  • 282 просмотра
Решения вопроса 1
Machinez
@Machinez
https://codepen.io/DNLHC/pen/KmWrJe
хотя согласно спецификации теги dd и dt оборачивать нельзя, но думаю пример ясен
переделал списком
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@ambrazhey
Начинающий верстальщик
Как вариант псевдоэлемент с border-bottom: dotted
Ответ написан
Комментировать
@kristenstewartdadada
Frontend Developer
я такое на флексе делал, то что с подчеркивание border-bottom: dotted делаешь и flex: 1
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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