Jump to content
php.lv forumi

<li> vertical align attiecībā pret tekstu


jam

Recommended Posts

ir lists

 

<li>asfasd asdf asdfa sdf asdfasda</li>

 

tas li saturs jāiebāž, piem., 100px platā div. Viņs var nowrapoties, ja nelien iekšā tajā div, bet tad tam li ir jābūt centrā attiecībā pret visām rindām, nevis apakšā.

 

Ne šitā:

 

..... asdfasdfasdf

o... asdfasdfad

 

o ir lista elements '.....' vnk apziimee space

 

 

Kā to panākt?

Edited by jam
Link to comment
Share on other sites

Kautkas tamlīdzīgs:

<div style="width: 300px">
<ul style="list-style: none; padding: 0px; margin: 0px;">
<li style="padding-left: 20px; background: url('bullet.jpg') left center no-repeat;">Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns </li>
<li style="padding-left: 20px; background: url('bullet.jpg') left center no-repeat;">Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns </li>
</ul>
</div>

 

Protams, ka style-i jāsamet css-ā, jāuztaisa kāds bullet.jpg/ gif fails, jāsaliek paddings/ margins kā gribās.

Link to comment
Share on other sites

Vienmēr laipni. Galvenais pārbaudi, vai visos brouseros attēlojas pa tavam prātam. Tur bija problēmas, ka IE un FF padding-i un margin-i elementiem UL un LI likās dažādi. Tas, liekās, ir viens no optimālākajiem variantiem:

ul.grey
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
ul.grey li
{
	background: url(/pic/bullets/grey.gif) no-repeat 0em 0.4em;
	padding: 0px 0px 0px 20px;
	margin: 3px 0px;
}

Nelikt UL elementam, bet gan LI elementiem padding-us. Eksperimentē.

Link to comment
Share on other sites

×
×
  • Create New...