CSS ile ul girintisini kaldırma

154

Listemdeki uzun satırlar etrafa sarıldığında girintiyi sıralanmamış listemden kaldıramıyorum. Listem şöyle görünüyor:

Windows kullanıcıları macunu kullanabilir
Mac kullanıcıları Terminal.app'yi kullanabilir
Linux kullanıcıları SSH userid@ourserver.com port 22'yi kullanabilir
...........> Veya Cyberduck gibi bir SFTP programı kullanın, sadece ........................... ..............> ourserver.com, bağlantı noktası 22

(noktalar girintileri gösterir)

Bir sürü çözüm okudum ve metin girintisini, liste stilini kullanarak kenar boşluğunu ve dolguyu sıfıra ayarlamayı denedim, ancak hiçbir şey çalışmıyor. Bence sorunun ortalanması gereken listenin üstünde bir başlık var ve bu yüzden kenar boşluklarını otomatik olarak ayarlıyorum ve sonra aşağıdaki listeyi karıştırıyorum. Ama üst div'ın içine iki div demiş olsam bile işe yaramıyor.

İşte HTML / CSS (Diğer tüm çözümlerin başarısız olmasına neden olan bir ayar olması durumunda her şeyi dahil ettim)

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

Ben bir keman koymak ... bu bana doğru görünüyor jsfiddle.net/qeqtK

— tedski

jsfiddle görmek ... ya da sadece tedski bağlantısını kullanmak isteyenler için;)

ah ama seninki "Normalize CSS" kontrol etti, bu tipik olarak gördüğün gibi değil :)

— tedski

392

Bu kod girintiyi kaldırır ve madde işaretlerini listeler.

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

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

— Zac
kaynak

1

Yanıtınız için teşekkürler. Sorunu şimdi anladım. Ben kullanıyordum: body {text-align: center;}

— başına

9

-webkit-padding-start: 0;

webkit motoru tarafından eklenen dolguları kaldıracak

— pleerock
kaynak

0

Bunu şuradan kaldır #info:

    margin-left:auto;

Bunu başlığınız için ekleyin:

#info p {
    text-align: center;
}

Sabit genişliğe vb. İhtiyacınız var mı? Bence gerekli olmayan şeyleri kaldırdım ve başlığı ortaladım text-align.

Örnek
http://jsfiddle.net/Vc8CB/

— Smamatti
kaynak