Mida de l'amplada dels camps d'una llista horitzontal?
Raimon Esteve
Hi ha una manera en CSS especificar una mida diferent de l'amplada de cada <li>?
El que intento fer es que s'assembli a la típica taula (<table> però amb <ul>, i les columnes estiguin alineades entre els <li>, però algunes cel·les han de ser mes amples que les altres.
Exemple:
<ul>
<li>--que sigui 100px d'amplada--</li>
<li>--que sigui 200px d'amplada--</li>
<li>--que sigui 50px d'amplada--</li>
</ul>
i el resultat seria
--100px--200px--50px--
El codi que tinc ara es:
<style>
#navlist{
list-style:none;
}
#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
background-image: none;
}
.channel_col1 {
background-color: black;
}
.channel_col2 {
}
.channel_col3 {
}
</style>
<ul id="navlist">
<li class="channel_col1">10:00 h.</li>
<li class="channel_col2">Nom</li>
<li class="channel_col3">Altra info</li>
</ul>
En aquest exemple, la primera "cel·la" em tenyeix el fons de color negre. Però l'amplada? ho he provat amb el width, px i em i res!
:/
Gràcies per endavant
Raimon
Arnau Siches
Raimon Esteve wrote:
> Tinc una llista que la mostro en disposició horitzontal, (en contes de
> vertical).
>
> Hi ha una manera en CSS especificar una mida diferent de l'amplada de
> cada <li>?
>
> El que intento fer es que s'assembli a la típica taula (<table> però amb
> <ul>, i les columnes estiguin alineades entre els <li>, però algunes
> cel·les han de ser mes amples que les altres.
>
> El codi que tinc ara es:
>
> <style>
> #navlist{
> list-style:none;
> }
> #navlist li {
> display: inline;
> list-style-type: none;
> padding-right: 20px;
> background-image: none;
> }
> .channel_col1 {
> background-color: black;
> }
> .channel_col2 {
> }
> .channel_col3 {
> }
> </style>
>
> <ul id="navlist">
> <li class="channel_col1">10:00 h.</li>
> <li class="channel_col2">Nom</li>
> <li class="channel_col3">Altra info</li>
> </ul>
>
> En aquest exemple, la primera "cel·la" em tenyeix el fons de color
> negre. Però l'amplada? ho he provat amb el width, px i em i res!
No t'està responent al "width" degut a que estas usant el model de caixa
inline. Perquè et respongui has d'usar el model de caixa block.
Podries posar els elements LI un al costat de l'altre flotant-los
(float) i així tindries el model de caixa en block.
--
arnau siches
css.artnau.com
Raimon Esteve
Perquè et respongui has d'usar el model de caixa block.
necessito unes vacances :/
es veritat! no m'havia adonat!
He acabat d'entendre millor el tema del llistat mirant exemples de:
http://css.maxdesign.com.au/listamatic/index.htm
us recomano que el tingueu a les adreces d'interès del navegador, que sempre pot anar bé :)
fins ara!
Raimon