Верстка колонки строк с увеличением каждой новой строки на 30px

Question

Есть три строки, каждая новая увеличивается на 30px. Как такое можно реализовать? С помощью функции calc возможно или нет?

Код HTML:

<div class="list">
    <div><span>Fully responsive design</span></div>
    <div><span>Hihh quality code</span></div>
    <div><span>Diffetent headers & layout</span></div>
</div>

Или придется каждому присваивать класс и ставить ширину?

Answer 1

Можно вот так, например:

.list{
  width: 500px
}
.list > div{
  background: blue;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  width: 100%;
}
.list > div:nth-child(2){
  width: calc(100% - 30px)
}
.list > div:nth-child(3){
  width: calc(100% - 60px)
}

<div class="list">
    <div><span>Fully responsive design</span></div>
    <div><span>Hihh quality code</span></div>
    <div><span>Diffetent headers & layout</span></div>
</div>

Answer 2

Если не пугает вложенность элементов, можно сделать вот так. Не надо высчитывать для каждого элемента отдельную ширину; ее легко изменить для всех строк, меняя только паддинг у .parent.

.container {width: 300px;}

.parent {
  padding-right: 30px;
}

.line {
  padding: 5px;
  background-color: coral;
  margin-bottom: 5px;
}

<div class="container">

<div class="parent">
  <div class="parent">
    <div class="parent">
      <div class="parent">
        <div class="parent">
          <div class="parent">
            <div class="line">Line 1</div>
          </div>
          <div class="line">Line 2</div>
        </div>
        <div class="line">Line 3</div>
      </div>
      <div class="line">Line 4</div>
    </div>
    <div class="line">Line 5</div>
  </div>
  <div class="line">Line 6</div>
</div>

</div>

Answer 3

Просто пропиши margin-right:

section {
  width: 50%;
  margin: auto;
  border: 1px dotted blue;
}

div {
  background: silver;
  padding: .5em;
}

div + div {
  margin-top: .5em;
}

<section>
  <div style="margin-right:60px"><span>Fully responsive design</span></div>
  <div style="margin-right:30px"><span>Hihh quality code</span></div>
  <div style="margin-right:0px"><span>Diffetent headers & layout</span></div>
</section>

БЛОГ НА HUSL

Верстка колонки строк с увеличением каждой новой строки на 30px

Ответы (3 шт):