Regstelling van Inlyn-blok Elemente na die Regterkant in CSS
Laat ons 'n element na die regterkant regstel:
<div class="parent">
<span class="child">teks</span>
</div>
.parent {
text-align: right;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
Gegee 'n div binne 'n sekere ouer:
<div class="parent">
<div class="child">teks</div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
Omskep die div-kind in 'n inlyn-blok element, en regstel dit dan na die regterkant van die ouer.
Wysig die vorige taak sodat die
div nie dig teen die regterkant vasgedruk is nie.
Voeg vir hierdie doel 'n regter padding
by die ouerelement.
Wysig die vorige taak sodat die
div nie dig teen die regterkant vasgedruk is nie.
Stel vir hierdie doel 'n regter
margin op die kindelement.
Gegee 'n skakel binne 'n sekere ouer:
<div class="parent">
<a href="" class="child">teks</a>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
width: 100px;
padding: 10px;
border: 1px solid green;
}
Omskep die skakel in 'n inlyn-blok element, en regstel dit dan na die regterkant van die ouer.
Wysig die vorige taak sodat die teks binne die skakel in die middel van daardie skakel geregstel is.