Regstelling van Inlyn-blok Elemente na die Regterkant in CSS

Laat ons 'n element na die regterkant regstel:

html<div class="parent">
  <span class="child">teks</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

Gegee 'n div binne 'n sekere ouer:

html<div class="parent">
  <div class="child">teks</div>
</div>
css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  padding: 10px;
  border: 1px solid green;
}

Omskep die div-kind in 'n inlyn-blok element, en regstel dit dan na die regterkant van die ouer.

Задание 2

Wysig die vorige taak sodat die div nie dig teen die regterkant vasgedruk is nie. Voeg vir hierdie doel 'n regter padding by die ouerelement.

Задание 3

Wysig die vorige taak sodat die div nie dig teen die regterkant vasgedruk is nie. Stel vir hierdie doel 'n regter margin op die kindelement.

Задание 4

Gegee 'n skakel binne 'n sekere ouer:

html<div class="parent">
  <a href="" class="child">teks</a>
</div>
css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  width: 100px;
  padding: 10px;
  border: 1px solid green;
}

Omskep die skakel in 'n inlyn-blok element, en regstel dit dan na die regterkant van die ouer.

Задание 5

Wysig die vorige taak sodat die teks binne die skakel in die middel van daardie skakel geregstel is.