Inline-blokk elemek jobb oldali igazítása CSS-ben
Igazítsuk az elemet jobbra:
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
Adott egy div valamilyen szülőn belül:
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;
}
Alakítsd át a div utódot inline-blokk elemré, majd igazítsd jobbra a szülőn belül.
Задание 2
Módosítsd az előző feladatot úgy, hogy
a div ne simuljon szorosan a jobb széléhez.
Ehhez adj a szülő elemhez jobb oldali
padding-ot.
Задание 3
Módosítsd az előző feladatot úgy, hogy
a div ne simuljon szorosan a jobb széléhez.
Ehhez az utód elemnek állíts be jobb oldali
margin-ot.
Задание 4
Adott egy link valamilyen szülőn belül:
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;
}
Alakítsd át a linket inline-blokk elemré, majd igazítsd jobbra a szülőn belül.
Задание 5
Módosítsd az előző feladatot úgy, hogy a linken belüli szöveg középre igazítva legyen a linkben.