[SOLUCIONADO] estilos en listas

[tonieet]

Hola a todos! me gustaría saber si algún experto me puede echar un cable con un problemilla que tengo con las listas, creo que es algo sencillo pero como soy novato me estoy volviendo loco.
Tengo la siguiente lista dentro de un div:


<ol>
<li>producto <b>6 €</b> </li>
<li>producto<b>6,20 €</b> </li>
<li>producto <b>6,20 €</b> </li>
<li>producto<b> 6,20</b> </li>
<li>producto <b>6,20</b> </li>
<li>producto <b>6,20</b> </li>
<li>producto <b>6,20</b> </li>
<li>producto <b>6,20</b> </li>

</ol>


bien.. pues necesito darle algún estilo en css de manera que me quede el precio alineado a la derecha del div y en otro color y se me quede todo subrayado (el <li> producto y texto)

estoy probando y probando y no lo consigo.. no se si es que tengo que poner los precios dentro de otro div.. o basta con poner un estilo tipo b{}... estoy un poco perdido, agradeceria cualquier tipo de ayuda..

gracias!

[NueveReinas]

¿Algo así? http://jsfiddle.net/fxx7f93c/

Código HTML:

<div class="contenedor">
<ol>
    <li>producto <span class="precio"><b>6 €</b></span> </li>
    <li>producto <span class="precio"><b>6,20 €</b></span> </li>
    <li>producto <span class="precio"><b>6,20 €</b></span> </li>
    <li>producto <span class="precio"><b> 6,20</b></span> </li>
    <li>producto <span class="precio"><b>6,20</b></span> </li>
    <li>producto <span class="precio"><b>6,20</b></span> </li>
    <li>producto <span class="precio"><b>6,20</b></span> </li>
    <li>producto <span class="precio"><b>6,20</b></span> </li>
</ol>
</div>
 

Código CSS:

ol {
    list-style:none;
    margin:0;
    padding:0;
}
 
.contenedor {
    max-width:400px;
    padding:15px;
    background:#CCC;
}
 
.precio {
    background:red;
    float:right;
}
 

Saludos.

[fede5426]

Siguiendo tu codigo, se me ocurre hacerlo asi:

Código HTML:

<div>  
  <ol>
    <li>producto <span class="precio">6 €</span> </li>
    <li>producto <span class="precio">6,20 €</span> </li>
    <li>producto <span class="precio">6,20 €</span> </li>
    <li>producto <span class="precio"> 6,20</span> </li>
    <li>producto <span class="precio">6,20</span> </li>
    <li>producto <span class="precio">6,20</span> </li>
    <li>producto <span class="precio">6,20</span> </li>
    <li>producto <span class="precio">6,20</span> </li>
  </ol>
</div>
 

Código CSS:

div{
  width:250px;
  overflow:hidden;
}
 
.precio{
  font-weight:bold;
  float:right;
  color:green;
}
 

http://codepen.io/anon/pen/vEwRVJ

Espero sea lo que estabas buscando.

Saludos

Edito: Cuando empecé a escribir la respuesta, todavía no estaba la de NueveReinas jaja pero básicamente es lo mismo.

[tonieet]

gracias compis! me sirvió! una ultima cosa.. como hago para que salga subrayado por <li>?

es decir, quiero poner una linea en la parte inferior separando producto y precio..

gracias!

[tonieet]

vale ya lo tengo.

li{
padding-top:7px;
border-bottom-color:#00F;
border-bottom:1px;
border-bottom:solid;
}

gracias! ;)

[NueveReinas]

Para simplificar:

Código CSS:

border-bottom:1px solid #00F;
 

[fede5426]

Iniciado por tonieet

vale ya lo tengo.

li{
padding-top:7px;
border-bottom-color:#00F;
border-bottom:1px;
border-bottom:solid;
}

gracias! ;)

En realidad lo correcto seria hacerlo asi:

Código CSS:

li{
padding-top:7px;
border-bottom:1px solid #00F;
}
 

Vas a ver que se ve diferente.

Saludos


Edito: En serio? Otra vez contestamos al mismo tiempo? jajaja

[tonieet]

jaja decid la verdad, estáis los dos en la misma habitación XD

gracias por el apunte, es verdad... así se ve mucho mejor.. antes no me salia 1px de grosor, ahora si jeje

saludos!

[desco6]

Soy otro usuario diferente...


Y que diferencia hay entre usar

SPAN clase

Y

Div alinig "center" clase"x"

[caricatos]

Hola:

desco6:

span es un elemento "genérico" en línea, y div un elemento "genérico" de bloque...

con estilos podrían transformarse ambos, pero la semántica debería respetarse.

Saludos

[NueveReinas]

Iniciado por desco6

Soy otro usuario diferente...


Y que diferencia hay entre usar

SPAN clase

Y

Div alinig "center" clase"x"

El SPAN generalmente se usa para añadir estilos en líneas de texto.