Justificar texto dentro de una lista - Control de sangria

[bichofio]

Hola
Vengo leyendo varios articulos, buscando la solucion para poder controlar las sangrias de los items de una lista cuando se esta usando una imagen como bullet.

Tengo una lista no ordenada <ul> que tiene varios items <li> .Algunos son cortos y otros largos. Cuando tengo un <li> que el texto genera una segunda linea por ser muy largo, el margen o sangria de la 2da linea no se alinea con la 1er linea de texto.

Me explico mejor con una imagen:



Esa linea roja que dibuje es donde quiero que se alinee todo el texto de esos <li>´s.


Detallo mi codigo HTML:

Código:

<ul class="listaprodserv">
        <li class="listaprodserv"><a href="#">Granallados convencionales y por circuito cerrado</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Arenados en seco y húmedo</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Aplicación con equipos Airless, convencionales y plurales</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Puesta en valor de estructuras</a></li>
</ul>

Detallo mi CSS:

Aclaro que use un margin-left:10px; para que se se peguen los items al borde de la caja, por diseño sin ir mas lejos...

Código:

.listaprodserv ul{margin:0; padding:0}

.listaprodserv li{
	list-style:url(../../img/generales/mota2.jpg);/*esta imagen tiene 12px ancho × 15px de alto*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#504f4f;
	list-style-position:inside;
	line-height:20px;
	margin-left:10px;}

.listaprodserv li a{
	color:#504f4f;
	list-style-position:inside;
	line-height:20px;
	text-decoration:none;}

.listaprodserv li a:hover{
	color:#797979;
	text-decoration:underline;}

Lo que ocurre es que la 2da linea de texto se alinea al comienzo de la imagen de la lista (bullet). Esto ocurre porque uso list-style-position:inside porque sino, no se ve el bullet...
Probe usando text-indent, pero solo se ve reflejado en la 1er linea del <li>.

Bueno, espero comentarios! gracias!

[Maicro]

¿Y si pones un text-indent negativo y un padding a les elementos <li> de la lista?

[ArturoGallegos]

en primera esta linea no esta haciendo nada

Código CSS:

.listaprodserv ul{margin:0; padding:0}
 

ya que la lista no esta dentro de esa clase, la clase en la lista... por lo que solo debes poner la clase sin el ul.

y segunda si deseas que te respete el margen (sangria) en las listas en lugar de

list-style-position:inside; aplica outside

Código CSS:

.listaprodserv li{
    list-style:url(../../img/generales/mota2.jpg);/*esta imagen tiene 12px ancho × 15px de alto*/
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#504f4f;
    list-style-position:outside;
    line-height:20px;
    margin-left:10px;}
 

[DragonX]

la imagen del bullet ponesela a tu UL, no a tu li

http://www.w3schools.com/Css/pr_list-style-image.asp

slds.-

[kseso?]

Otra forma, además de la indicada por Dragón

Código CSS:

ul {margin:0 auto; padding:0; width: 200px;}
 
li{
    list-style: disc;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#504f4f;
}
 
li a{
  color: #504F4F;
  display: block;
  text-decoration: none;
  padding-left: 10px;
  }
 
li a:hover{
    color:#797979;
    text-decoration:underline;}
 

EL html es el publicado por usted.

Como verá, el list-style lo aplico a los |li| y el paddin a los enlaces |a|