link - ul html

eliminando ul sang con CSS

Question

Parece que no puedo eliminar la sangría de mi lista desordenada cuando las líneas largas de mi lista se envuelven. Así es como se ve mi lista:

• Los usuarios de Windows pueden usar masilla
• Los usuarios de Mac pueden usar Terminal.app
• Los usuarios de Linux pueden usar SSH [email protected] puerto 22
• ...........> O usa un programa SFTP como Cyberduck simplemente apunta a ........................... ..............> ourserver.com, puerto 22

(los puntos muestran las sangrías)

He leído un montón de soluciones y he intentado establecer el margen y el relleno en cero, usando texto-sangría, estilo de lista, pero nada funciona. Creo que el problema es que hay un encabezado por encima de la lista que necesito que esté centrado, así que estoy estableciendo los márgenes en automático y luego está arruinando la lista a continuación. Pero incluso si pongo dos divisiones dentro del div principal, no funciona.

Aquí está el html / css (incluí todo en caso de que haya alguna configuración que esté causando que todas las demás soluciones fallen)

<div id="info">
    <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> 
    <ul>
        <li>Windows users can use putty</li>
        <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li>
        <li>Linux users can use SSH [email protected] port 22</li>
        <li>Or use an SFTP program like <a href="http://cyberduck.ch/">Cyberduck</a> just point it at ourserver.com, port 22</li>
    </ul>
</div>

#info {
    color:#FFFFFF;
    width:440px;
    margin-left:auto;
    margin-right:auto;
    border-radius: 10px;
    border-style:solid;
    border-width:2px;
    border-color:#FFF; 
    padding-bottom:20px; padding-left:20px; padding-right:20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
}
#info ul li { 
    float:left;
}

Answer 1

Eliminar esto de #info :

    margin-left:auto;

Agregue esto para su encabezado:

#info p {
    text-align: center;
}

¿Necesitas el ancho fijo, etc.? Eliminé lo que en mi opinión no era necesario y centré el encabezado con text-align .

Muestra
http://jsfiddle.net/Vc8CB/

Answer 2

Funciona para mí con

ul {
    padding: 0;
    list-style-type: none;
}

http://jsfiddle.net/qeqtK/2/

Answer 3

-webkit-padding-start: 0;

eliminará el relleno añadido por el motor webkit