Rimozione del rientro ul con CSS

154

Non riesco a rimuovere il rientro dalla mia lista non ordinata quando compaiono lunghe righe nella mia lista. Ecco come appare la mia lista:

Gli utenti Windows possono usare lo stucco
Gli utenti Mac possono utilizzare Terminal.app
Gli utenti Linux possono utilizzare SSH userid@ourserver.com porta 22
...........> Oppure usa un programma SFTP come Cyberduck puntalo su ........................... ..............> ourserver.com, porta 22

(i punti mostrano i rientri)

Ho letto un sacco di soluzioni e ho provato a impostare il margine e il riempimento a zero, usando il rientro del testo, in stile elenco, ma non funziona nulla. Penso che il problema sia che c'è un'intestazione sopra l'elenco che devo centrare e quindi sto impostando i margini su auto e quindi rovina l'elenco qui sotto. Ma anche se dico due div all'interno del genitore div, non funziona.

Ecco l'HTML / CSS (ho incluso tutto nel caso in cui ci sia qualche impostazione che sta causando il fallimento di tutte le altre soluzioni)

<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

— solerous
fonte

L'ho messo in un violino ... questo mi sembra giusto jsfiddle.net/qeqtK

— tedski

jsfiddle per coloro che vogliono vederlo ... o semplicemente usare il link di tedski;)

ah ma il tuo ha "CSS normalizzato" controllato, che non è quello che vedi di solito :)

— tedski

391

Questo codice rimuoverà il rientro e elenca i punti elenco.

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

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

— Zac
fonte

1

Grazie per la risposta. Ho capito il problema ora. Stavo usando: body {text-align: center;}

— solerous

9

-webkit-padding-start: 0;

rimuoverà l'imbottitura aggiunta dal motore webkit

— pleerock
fonte

0

Rimuovi questo da #info:

    margin-left:auto;

Aggiungi questo per la tua intestazione:

#info p {
    text-align: center;
}

Hai bisogno della larghezza fissa ecc.? Ho rimosso le cose non necessarie secondo me e ho centrato l'intestazione con text-align.

Esempio di
http://jsfiddle.net/Vc8CB/

— Smamatti
fonte