Uitlijnen van inline-block elementen naar rechts in CSS

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

Gegeven een div binnen een ouder element:

html<div class="parent">
  <div class="child">text</div>
</div>

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

Converteer de child-div naar een inline-block element en lijn het vervolgens naar rechts uit binnen de ouder.

Задание 2

Pas de vorige opdracht aan zodat de div niet strak tegen de rechterkant aan zit. Voeg hiervoor rechter padding toe aan het ouderelement.

Задание 3

Pas de vorige opdracht aan zodat de div niet strak tegen de rechterkant aan zit. Geef hiervoor het child-element een rechter margin.

Задание 4

Gegeven een link binnen een ouder element:

html<div class="parent">
  <a href="" class="child">text</a>
</div>

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

Converteer de link naar een inline-block element en lijn het vervolgens naar rechts uit binnen de ouder.

Задание 5

Pas de vorige opdracht aan zodat de tekst in de link gecentreerd is binnen deze link.