Eliminar la sangría ul con CSS

154

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

Los usuarios de Windows pueden usar masilla
Los usuarios de Mac pueden usar la Terminal.app
Los usuarios de Linux pueden usar SSH userid@ourserver.com puerto 22
...........> O utilice un programa SFTP como Cyberduck, simplemente apúntelo a ........................... ..............> ourerver.com, puerto 22

(los puntos muestran las sangrías)

Leí un montón de soluciones e intenté establecer el margen y el relleno en cero, usando sangría de texto, estilo de lista, pero nada funciona. Creo que el problema es que hay un encabezado sobre la lista en el que necesito centrarme, por lo que estoy configurando los márgenes en automático y luego está desordenando la lista a continuación. Pero incluso si pongo dos divs dentro del div padre, no funciona.

Aquí está el HTML / CSS (incluí todo en caso de que haya alguna configuración que esté causando que todas las otras 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 userid@ourserver.com 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;
}

html css html-lists

— solemne
fuente

Lo puse en un violín ... esto me parece correcto jsfiddle.net/qeqtK

— tedski

jsfiddle para aquellos que quieran verlo ... o simplemente usar el enlace de tedski;)

ah, pero el tuyo tiene "CSS normalizado" marcado, que no es lo que normalmente ves :)

— tedski

391

Este código eliminará la sangría y enumerará las viñetas.

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

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

— Zac
fuente

1

Gracias por la respuesta. Descubrí el problema ahora. Estaba usando: body {text-align: center;}

— solerous

9

-webkit-padding-start: 0;

eliminará el relleno agregado por el motor de webkit

— pleerock
fuente

0

Eliminar esto de #info:

    margin-left:auto;

Agregue esto para su encabezado:

#info p {
    text-align: center;
}

¿Necesita el ancho fijo, etc.? En mi opinión, eliminé las cosas no necesarias y centré el encabezado con text-align.

Muestra
http://jsfiddle.net/Vc8CB/

— Smamatti
fuente