Uratibu Vipengele vya Inline-Block Kulia kwa CSS

Tuweke kipengele kulia:

<div class="parent">
	<span class="child">maandishi</span>
</div>

.parent {
	text-align: right;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

Amepewa div ndani ya mzazi fulani:

<div class="parent">
	<div class="child">maandishi</div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

Badilisha div mtoto kuwa kipengele cha inline-block, kisha uratibu upande wa kulia wa mzazi.

Badilisha kazi iliyotangulia ili div isiwe imegusana na ukingo wa kulia. Kwa hili, ongeza padding wa kulia kwa kipengele cha mzazi.

Badilisha kazi iliyotangulia ili div isiwe imegusana na ukingo wa kulia. Kwa hili, weka margin wa kulia kwa kipengele mtoto.

Amepewa kiungo ndani ya mzazi fulani:

<div class="parent">
	<a href="" class="child">maandishi</a>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	width: 100px;
	padding: 10px;
	border: 1px solid green;
}

Badilisha kiungo kuwa kipengele cha inline-block, kisha uratibu upande wa kulia wa mzazi.

Badilisha kazi iliyotangulia ili maandishi ndani ya kiungo yauratibu katikati ya kiungo hicho.