Zarovnání řádkově-blokových prvků na pravý okraj v CSS
Zarovnáme prvek na pravý okraj:
<div class="parent">
<span class="child">text</span>
</div>
.parent {
text-align: right;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
Je dán div uvnitř nějakého rodiče:
<div class="parent">
<div class="child">text</div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
Převeďte div-potomek na řádkově-blokový prvek, poté jej zarovnejte na pravý okraj rodiče.
Upravte předchozí úlohu tak, aby
se div nepřikládal těsně k pravému okraji.
K tomu přidejte rodičovskému prvku
pravý padding.
Upravte předchozí úlohu tak, aby
se div nepřikládal těsně k pravému okraji.
K tomu nastavte prvku-potomkovi pravý
margin.
Je dán odkaz uvnitř nějakého rodiče:
<div class="parent">
<a href="" class="child">text</a>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
width: 100px;
padding: 10px;
border: 1px solid green;
}
Převeďte odkaz na řádkově-blokový prvek, poté jej zarovnejte na pravý okraj rodiče.
Upravte předchozí úlohu tak, aby byl text uvnitř odkazu zarovnán na střed tohoto odkazu.