Usuwanie wcięcia ul przy użyciu CSS

Nie mogę usunąć wcięcia z mojej nieuporządkowanej listy, gdy zawijają się długie wiersze na mojej liście. Oto co moja lista wygląda następująco:Usuwanie wcięcia ul przy użyciu CSS

użytkownicy Windows mogą używać użytkownicy kit
Mac mogą korzystać z Terminal.app
Użytkownicy systemu Linux mogą korzystać z SSH [email protected] portu 22
.. .........> Lub użyj programu SFTP, takiego jak Cyberduck, po prostu wskaż go na ............................ .............> ourserver.com, port 22

(kropki pokazują wcięcia)

Przeczytałem kilka rozwiązań i próbowałem ustawić margines i dopełnienie do zera, używając wcięcia tekstowego, stylu listy, ale nic nie działa. Myślę, że problem polega na tym, że nagłówek znajduje się nad listą, którą muszę wyśrodkować, więc ustawiam marginesy na automatyczne, a następnie zepsuję poniższą listę. Ale nawet jeśli powiem dwa divy w div rodzica, to nie działa.

Oto html/css (I zawarte wszystko, co w przypadku istnieje pewne ustawienie, które jest przyczyną wszystkich innych rozwiązań, by upaść)

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

Źródło

2012-03-08 solerous

Umieściłem to w skrzypcach ... to wygląda na prawo do mnie http://jsfiddle.net/qeqtK/ – tedski

[jsfiddle] (http://jsfiddle.net/FQNfa/) dla tych, którzy chcą to zobaczyć .. lub po prostu użyj linku tedskiego;) –

ah, ale twój ma "Znormalizowany CSS", co nie jest tym, co widzisz zazwyczaj :) – tedski

261

To działa na mnie z

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

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

Źródło

2012-03-08 16:20:49 Zac

Dzięki za odpowiedź. Zorientowałem się teraz na problemie. Używałem: body {text-align: center;} – solerous

A więc zmieniając go na ul {text-align: left;} i teraz działa! – solerous

fajne, cieszę się, że znalazłeś problem. możesz zastanowić się nad włączeniem pliku reset.css, aby zapobiec kolejnym tajemnicom. – Zac

Usuń ten z #info:

margin-left:auto;

Dodaj to do swojego nagłówka:

#info p { 
    text-align: center; 
}

Potrzebujesz stałej szerokości itp.? Usunąłem z mojej opinii niepotrzebne rzeczy i wycentrowałem nagłówek pod text-align.

Próbka

Źródło

2012-03-08 16:01:18 Smamatti

-webkit-padding-start: 0;

usunie wyściółkę dodany przez silnik WebKit

Źródło

2013-05-22 09:03:46 pleerock

Nie ma czegoś takiego jak 0px, to tylko 0;) – Rob

Usuwanie wcięcia ul przy użyciu CSS

Odpowiedz

Powiązane problemy