Sətir-blok elementlərinin CSS-də sağ tərəfə düzləndirilməsi

html<div class="parent">
  <span class="child">mətn</span>
</div>

css.parent {
  text-align: right;
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid green;
}

Задание 1

Müəyyən bir valideyn daxilində div verilmişdir:

html<div class="parent">
  <div class="child">mətn</div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  padding: 10px;
  border: 1px solid green;
}

Div nəslini sətir-blok elementinə çevirin, sonra onu valideynin sağ tərəfinə düzləndirin.

Задание 2

Əvvəlki məsələni elə dəyişin ki, div sağ kənara sıx yapışmasın. Bunun üçün valideyn elementinə sağ padding əlavə edin.

Задание 3

Əvvəlki məsələni elə dəyişin ki, div sağ kənara sıx yapışmasın. Bunun üçün nəslin elementinə sağ margin qoyun.

Задание 4

Müəyyən bir valideyn daxilində link verilmişdir:

html<div class="parent">
  <a href="" class="child">mətn</a>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  width: 100px;
  padding: 10px;
  border: 1px solid green;
}

Linki sətir-blok elementinə çevirin, sonra onu valideynin sağ tərəfinə düzləndirin.

Задание 5

Əvvəlki məsələni elə dəyişin ki, linkin içindəki mətn həmin linkin mərkəzinə düzləndirilsin.