Wyrównanie elementów liniowo-blokowych do prawej krawędzi w CSS
Wyrównajmy element do prawej krawędzi:
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
Dany div wewnątrz jakiegoś rodzica:
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;
}
Przekształć div-potomek w element liniowo-blokowy, następnie wyrównaj go do prawej krawędzi rodzica.
Задание 2
Zmodyfikuj poprzednie zadanie tak, aby
div nie przylegał ciasno do prawej krawędzi.
W tym celu rodzicielskiemu elementowi dodaj
prawy padding.
Задание 3
Zmodyfikuj poprzednie zadanie tak, aby
div nie przylegał ciasno do prawej krawędzi.
W tym celu elementowi-potomkowi ustaw prawy
margin.
Задание 4
Dane link wewnątrz jakiegoś rodzica:
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;
}
Przekształć link w element liniowo-blokowy, następnie wyrównaj go do prawej krawędzi rodzica.
Задание 5
Zmodyfikuj poprzednie zadanie tak, aby tekst wewnątrz linku był wyrównany do środka tego linku.