Generant tres columnes sense taules mitjançant l'etiqueta <li> i CSS/XHTML

Amb aquest codi CSS i el següent XHTML pots maquetar-te una llista de resultats dins de tres columnes sense utilitzar cap taula.

Aquest és el codi CSS:

UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}

I aquest és el codi XHMTL amb text (vàlid per imatges o qualsevol objecte):

<ul class="col3">
<li>Opció nº 1</li>
<li>Opció nº 2</li>
<li>Opció nº 3</li>
<li>Opció nº 4</li>
<li>Opció nº 5</li>
<li>Opció nº 6</li>
</ul>



Envia un nou comentari

No publicaré el teu correu i em servirà per contactar-te.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Les línies i paràgrafs es trenquen automàticament.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

Més informació sobre opcions de format

CAPTCHA
Image CAPTCHA