ugrás a tartalomhoz

Listák középre

Burnee · 2011. Ápr. 16. (Szo), 15.32
Sziasztok!

Adott egy div, benne 3 listával:

<div class="myDiv">
  <ul>
    <li>Hosszú hosszú hosszú szöveg</li>
    <li>rövid szöveg</li>
    <li>rövid szöveg</li>
  </ul>
  <ul>
    <li>rövid szöveg</li>
    <li>rövid szöveg</li>
    <li>rövid szöveg</li>
  </ul>
  <ul>
    <li>rövid szöveg</li>
    <li>rövid szöveg</li>
    <li>rövid szöveg</li>
  </ul>
</div>


.myDiv {
  height: 200px;
  /* width: dinamikus, de nem a listáktól függ */
}
.myDiv ul {
  float: left;
  /* width, height: a tartalomtól függ */
}
Namármost az lenne a kérdésem tisztelettel, hogy hogyan kerülnek ezek a listák középre a myDiv-ben (jQuery nélkül)?
A float persze nem fontos, de a listáknak valahogy egymás mellé kell kerülniük.
‹ Menü kiakad "switch case" vs "this" ›
 ■
1

Mihez képest?

Poetro · 2011. Ápr. 16. (Szo), 18.19
Mihez képest kell középre kerülniük? Emennyiben nincsen a listáknak fix magassága, úgy nehéz függőlegesen középre rakni őket. Ugyanez igaz a szélességre is. Hogy került ide a jQuery? Sima JavaScript-tel meg lehet oldani, nem kell hozzá jQuery. CSS-sel, mint említettem, problémás, ugyanakkor display: table segítségével lehetséges.
2

Vízszintesen

Burnee · 2011. Ápr. 16. (Szo), 18.54
Vízszintesen, és én is féltem tőle, hogy problémás lesz.

A jQuery úgy került ide, hogy amúgy is be van töltve és azzal egyszerűbb:
- Adok a listáknak egy wrappert, aminek a szélessége az oldal betöltése után adott. Ezt megfogom és margin: 0 auto;

De gondoltam, nem nyúlok ehhez a megoldáshoz, amíg nem tudom biztosan, hogy nincs elegánsabb.
3

display: inline

szappantarto · 2011. Ápr. 16. (Szo), 20.31
Nekem még mindig nem teljesen világos, hogy mit akarsz "középre" de szerintem te arra gondolsz, hogy a három lista egymás mellé kerüljön. Ekkor:
.myDiv ul-hoz add hozzá ezt a tulajdonságot: display: inline;
4

A 3 lista egymás mellé

Burnee · 2011. Ápr. 17. (V), 02.15
A 3 lista egymás mellé kerüljön, és ők hárman együtt alkotva egy egészet, kerüljenek középre a myDiv-en belül (vízszintesen).

- Már írtam rá azóta scriptet, valamint felfedeztem egy jQuery plugin-t is.

De az elegáns megoldásokat még mindig szívesen fogadom.
5

.myDiv { margin:

szappantarto · 2011. Ápr. 17. (V), 08.46

.myDiv {
	margin: auto;
	width: 800px; 
//a width-et persze cserélheted, megkaphatja a szélességet öröklött tulajdonságként is,
// de kell hogy legyen szélességérték megadva, különben nem fog középre kerülni!

}
.myDiv ul {
	display: inline;
	float: left;
}
.myDiv li {
	display: block;
	margin: 0px;
}
6

ennyi lenne...

Burnee · 2011. Ápr. 17. (V), 11.05
Ennyi lenne, ha a myDiv szélességét meghatározhatnám, de sajnos említettem, hogy az dinamikus.
7

Centered float

ganyecz · 2011. Ápr. 17. (V), 13.55
Talán valami ilyesmire van szükséged:

.myDivWrapper {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}
.myDiv {
  position: relative;
  left: 50%;
}
.myDiv ul {
  float: left;
}


<div class="myDivWrapper">
  <div class="myDiv">
    <ul> ... </ul>
    <ul> ... </ul>
    <ul> ... </ul>
  </div>
</div>
8

Like!

Burnee · 2011. Ápr. 18. (H), 00.28
Köszi Mester! Ilyesmire!