Ul-Einrückung mit CSS entfernen

154

Ich kann den Einzug scheinbar nicht aus meiner ungeordneten Liste entfernen, wenn lange Zeilen in meiner Liste herumlaufen. So sieht meine Liste aus:

Windows-Benutzer können Kitt verwenden
Mac-Benutzer können die Terminal.app verwenden
Linux-Benutzer können SSH userid@ourserver.com Port 22 verwenden
...........> Oder verwenden Sie ein SFTP-Programm wie Cyberduck und zeigen Sie einfach auf ........................... ..............> ourserver.com, Port 22

(Die Punkte zeigen die Einrückungen)

Ich habe eine Reihe von Lösungen gelesen und versucht, den Rand und das Auffüllen mit Texteinzug im Listenstil auf Null zu setzen, aber nichts funktioniert. Ich denke, das Problem ist, dass es eine Überschrift über der Liste gibt, die zentriert werden muss, und deshalb setze ich die Ränder auf automatisch und dann bringt es die Liste unten durcheinander. Aber selbst wenn ich zwei Divs in das übergeordnete Div setze, funktioniert es nicht.

Hier ist das HTML / CSS (ich habe alles aufgenommen, falls es eine Einstellung gibt, die dazu führt, dass alle anderen Lösungen fehlschlagen)

<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

— einsam
quelle

Ich habe es in eine Geige gesteckt ... das sieht für mich richtig aus jsfiddle.net/qeqtK

— tedski

jsfiddle für diejenigen, die es sehen wollen ... oder einfach Tedskis Link benutzen;)

ah, aber deine hat "Normalisiertes CSS"

— aktiviert,

391

Dieser Code entfernt die Einrückungen und listet Aufzählungszeichen auf.

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

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

— Zac
quelle

1

Danke für die Antwort. Ich habe das Problem jetzt herausgefunden. Ich benutzte: body {text-align: center;}

— einsamer

9

-webkit-padding-start: 0;

Entfernt die von der Webkit-Engine hinzugefügte Polsterung

— Pleerock
quelle

0

Entfernen Sie dies aus #info:

    margin-left:auto;

Fügen Sie dies für Ihren Header hinzu:

#info p {
    text-align: center;
}

Benötigen Sie die feste Breite etc.? Ich habe das meiner Meinung nach nicht notwendige Zeug entfernt und den Header mit zentriert text-align.

Beispiel
http://jsfiddle.net/Vc8CB/

— Smamatti
quelle