Usuwanie wcięcia ul za pomocą CSS

154

Nie mogę usunąć wcięcia z listy nieuporządkowanej, gdy zawijają się długie linie na liście. Oto jak wygląda moja lista:

  • Użytkownicy systemu Windows mogą używać szpachli
  • Użytkownicy komputerów Mac mogą korzystać z Terminal.app
  • Użytkownicy systemu Linux mogą używać SSH identyfikator_uż[email protected], port 22
  • ...........> Lub użyj programu SFTP, takiego jak Cyberduck, po prostu skieruj go na ........................... ..............> ourserver.com, port 22

(kropki pokazują wcięcia)

Przeczytałem kilka rozwiązań i próbowałem ustawić marginesy i dopełnienie na zero, używając wcięcia tekstu, stylu listy, ale nic nie działa. Myślę, że problem polega na tym, że nad listą znajduje się nagłówek, który muszę wyśrodkować, więc ustawiam marginesy na automatyczne, a następnie psuje poniższą listę. Ale nawet jeśli wstawię powiedzmy dwa elementy div do elementu nadrzędnego, to nie zadziała.

Oto HTML / CSS (zawarłem wszystko na wypadek, gdyby było jakieś ustawienie, które powoduje niepowodzenie wszystkich innych rozwiązań)

<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>

#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 solerny
źródło
Położyłem to na skrzypcach ... to wygląda dobrze dla mnie jsfiddle.net/qeqtK
tedski
jsfiddle dla tych, którzy chcą to zobaczyć ... lub po prostu użyj linku tedskiego;)
ah, ale twój ma zaznaczony "Normalized CSS", co nie jest tym, co zwykle widzisz :)
tedski

Odpowiedzi:

391

Ten kod usunie wcięcia i listy punktorów.

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

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

Zac
źródło
1
Dzięki za odpowiedzi. Teraz znalazłem problem.
Używałem
9 
-webkit-padding-start: 0;

usunie wypełnienie dodane przez silnik webkit

pleerock
źródło
0

Usuń to z #info: 

    margin-left:auto;

Dodaj to do swojego nagłówka:

#info p {
    text-align: center;
}

Czy potrzebujesz stałej szerokości itp.? Usunąłem moim zdaniem niepotrzebne rzeczy i wyśrodkowałem nagłówek text-align.

Przykład
http://jsfiddle.net/Vc8CB/

Smamatti
źródło