Suppression de l'indentation ul avec CSS

154

Je n'arrive pas à supprimer le retrait de ma liste non ordonnée lorsque les longues lignes de ma liste se terminent. Voici à quoi ressemble ma liste:

Les utilisateurs de Windows peuvent utiliser du mastic
Les utilisateurs Mac peuvent utiliser le Terminal.app
Les utilisateurs Linux peuvent utiliser SSH userid@ourserver.com port 22
...........> Ou utilisez un programme SFTP comme Cyberduck, pointez-le simplement sur ........................... ..............> ourserver.com, port 22

(les points montrent les retraits)

J'ai lu un tas de solutions et essayé de définir la marge et le remplissage à zéro, en utilisant un retrait de texte, un style de liste, mais rien ne fonctionne. Je pense que le problème est qu'il y a un en-tête au-dessus de la liste sur lequel je dois être centré.Je mets donc les marges sur auto, puis ça gâche la liste ci-dessous. Mais même si je mets, disons, deux div dans le div parent, cela ne fonctionne pas.

Voici le HTML / CSS (j'ai tout inclus au cas où il y aurait un paramètre qui ferait échouer toutes les autres solutions)

<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

— inquiet
source

Je l'ai mis dans un violon ... cela me semble juste jsfiddle.net/qeqtK

— tedski

jsfiddle pour ceux qui veulent le voir ... ou simplement utiliser le lien de tedski;)

ah mais le vôtre a coché "CSS normalisé", ce qui n'est pas ce que vous voyez généralement :)

— tedski

392

Ce code supprimera l'indentation et listera les puces.

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

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

— Zac
source

1

Merci pour la réponse. J'ai compris le problème maintenant. J'utilisais: body {text-align: center;}

— solerous

9

-webkit-padding-start: 0;

supprimera le remplissage ajouté par le moteur Webkit

— pleerock
source

0

Supprimer ceci de #info:

    margin-left:auto;

Ajoutez ceci pour votre en-tête:

#info p {
    text-align: center;
}

Avez-vous besoin de la largeur fixe, etc.? J'ai supprimé le truc à mon avis pas nécessaire et centré l'en-tête avec text-align.

Exemple
http://jsfiddle.net/Vc8CB/

— Smamatti
source