Eliminar sangría de lista con CSS

Resuelto solerous asked hace 12 años • 3 respuestas

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

  • Los usuarios de Windows pueden usar PuTTY.
  • Los usuarios de Mac pueden usar Terminal.app
  • Los usuarios de Linux pueden usar SSH [email protected] puerto 22
  • ...........>O utilice un programa SFTP como Cyberduck, simplemente apúntelo a ........................... ..............>nuestroservidor.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 encima de la lista que necesito centrar, por lo que estoy configurando los márgenes en automático y luego está arruinando la lista a continuación. Pero incluso si pongo dos divs 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)

#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;
}
<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>
Expandir fragmento

solerous avatar Mar 08 '12 22:03 solerous
Aceptado

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 avatar Mar 08 '2012 16:03 Zac

Para mantener las viñetas, puede reemplazar el estilo de lista: ninguno con la posición de estilo de lista: dentro o la abreviatura estilo de lista: dentro:

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}
<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>
Expandir fragmento

Julien J avatar Jun 19 '2021 09:06 Julien J
-webkit-padding-start: 0;

eliminará el relleno agregado por el motor webkit

pleerock avatar May 22 '2013 09:05 pleerock