Inline-bloka elementu izlīdzināšana pa labo malu CSS
Izlīdzināsim elementu pa labo malu:
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
Dots div kāda vecāka iekšienē:
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;
}
Pārveidojiet div-pēcteci par inline-bloka elementu, tad izlīdziniet to pa vecāka labo malu.
Задание 2
Modificējiet iepriekšējo uzdevumu tā, lai
div netiktu cieši piespiests pie labā mala.
Lai to izdarītu, vecāka elementam pievienojiet
labo padding.
Задание 3
Modificējiet iepriekšējo uzdevumu tā, lai
div netiktu cieši piespiests pie labā mala.
Lai to izdarītu, elementam-pēctecim iestatiet labo
margin.
Задание 4
Dota saite kāda vecāka iekšienē:
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;
}
Pārveidojiet saiti par inline-bloka elementu, tad izlīdziniet to pa vecāka labo malu.
Задание 5
Modificējiet iepriekšējo uzdevumu tā, lai teksts saites iekšienē būtu izlīdzināts pa šīs saites centru.