Как сверстать эти хар-ки?

Question

[Сергей Соболь]

Здравствуйте!

Сейчас нужно сверстать раздел характеристик, но я не совсем понимаю, как ПРАВИЛЬНО сделать, чтобы цифры справа еще и не поплыли?

Comments

[Вадим]

Что значит "ещё не поплыли"?

[Дима Долготер]

ну, черезж но будет работать
всей строке дай border-bottom: 1px dashed #000;
а надписям border-bottom: 1px dashed #fff;
и просто линии задай

display:flex;
justify-content:space-between

Answer 1

[Вадим]

Comments

[Ankhena]

А если пустой div заменить на псевдо, то будет огонь ;)

[Вадим]

Ankhena, не поверите, я прямо ждал именно от Вас этот комментарий)
И вот каков мой ответ:
Так нагляднее :-)

[Ankhena]

Вадим, оу, моя фобия пустых или лишних блоков получила известность :)
В глубине души, я бы еще хотела поменять ul на table.
Но смущает, что пришлось бы поменять бордер на градиент, чтобы точно не было стыков.

[Вадим]

Ankhena, Да, я тоже думал о таблицах, но тогда с точками было бы значительно больше заморочек, и при некоторых вариантах ещё и доступность могла бы пострадать. А так как тут всего 2 "деления" наименование-значение то решил что список тоже тут отлично подходит.

[Ankhena]

Вадим, проблем с доступностью не придумала.
Но да, списком проще.

[Сергей delphinpro]

Ankhena, тут больше подходит definition list (dl, dt, dd)
но тогда от гридов придется отказаться, наверное.

[Сергей delphinpro]

например так

[Вадим]

Сергей delphinpro,

тут больше подходит definition list (dl, dt, dd)

Точно!

[Ankhena]

Сергей delphinpro, не люблю его, видимо не до конца осознаю спеку и семантику. Понимаю, когда есть пары термин-определение, типа словаря.
А когда вижу его при верстке, например, характеристик товаров, т.е. значение-характеристика, что-то меня начинает смущать.

А тут еще и заголовки у каждого столбца.

[Сергей delphinpro]

Ankhena, может быть

[Ankhena]

Сергей delphinpro, свинство, гридами расходятся точечки https://jsfiddle.net/53tgeajf/
По логике не должны, но ..

[Сергей delphinpro]

Ankhena, имеешь ввиду на стыке элементов? по-любому будет расхождение. элементы независимы друг от друга. рисунок на них может быть синхронным только при bgp:f
А это очень редкий кейс.

[Ankhena]

Сергей delphinpro, градиент мог бы и нормально считаться, без глюков. Возможно, с более длинными штрихами прокатило бы.
Но и флексами хорошо.

Answer 2

[BornTo FreeFall]

Один в один - не смогу, ибо в верстке я не гуру, но что-то похожее:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul li {
  display: block;
  overflow: hidden;
  position: relative;
}

.item__name {
  display: inline-block;
  position: relative;
  
}

.item__name:after {
  content: '';
  position: absolute;
  left: 100%;
  right: -9999px;
  bottom: 0;
  border-bottom: 1px dotted #888;
}

.left {
  width: 80%;
  overflow: hidden;
  position: relative;
  float: left;
}

.item__value {
  width: 20%;
  float: right;
}

<ul>
  <li>
    <div class="left">
      <span class="item__name">Первый пункт</span>
    </div>
    <span class="item__value">Значение</span>
  </li>
  <li>
    <div class="left">
      <span class="item__name">Второй пункт</span>
    </div>
    <span class="item__value">Значение</span>
  </li>
  <li>
    <div class="left">
      <span class="item__name">Третий пункт</span>
    </div>    
    <span class="item__value">Значение</span>
  </li>
</ul>

Проверка работоспособности: Клик