Menghapus lekukan ul dengan CSS


154

Sepertinya saya tidak bisa menghapus indentasi dari daftar tidak terurut ketika garis panjang dalam daftar saya membungkus. Ini adalah daftar saya:

  • Pengguna Windows dapat menggunakan dempul
  • Pengguna Mac dapat menggunakan Terminal.app
  • Pengguna Linux dapat menggunakan SSH userid@ourserver.com port 22
  • ...........> Atau gunakan program SFTP seperti Cyberduck, arahkan saja ke ........................... ..............> ourserver.com, port 22

(titik-titik menunjukkan indentasi)

Saya telah membaca banyak solusi dan mencoba mengatur margin dan padding ke nol, menggunakan indentasi teks, gaya daftar, tetapi tidak ada yang berhasil. Saya pikir masalahnya adalah ada tajuk di atas daftar yang harus saya tempatkan dan saya mengatur margin ke otomatis dan kemudian mengacaukan daftar di bawah ini. Tetapi bahkan jika saya katakan dua div di dalam div induk itu tidak bekerja.

Berikut ini adalah HTML / CSS (saya sertakan semuanya kalau-kalau ada beberapa pengaturan yang menyebabkan semua solusi lain gagal)

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

Saya menaruhnya di biola ... ini terlihat benar bagi saya jsfiddle.net/qeqtK
tedski

jsfiddle bagi mereka yang ingin melihatnya ... atau hanya menggunakan penghubung tedski ini;)

ah tapi milikmu sudah diperiksa "CSS Normalisasi", yang biasanya tidak kamu lihat :)
tedski

Jawaban:


391

Kode ini akan menghapus lekukan dan daftar peluru.

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

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


1
Terima kasih atas tanggapannya. Saya menemukan masalahnya sekarang. Saya menggunakan: body {text-align: center;}
solerous

9
-webkit-padding-start: 0;

akan menghapus bantalan ditambahkan oleh mesin webkit


0

Hapus ini dari #info:

    margin-left:auto;

Tambahkan ini untuk tajuk Anda:

#info p {
    text-align: center;
}

Apakah Anda memerlukan lebar tetap dll.? Saya menghapus hal-hal yang menurut saya tidak perlu dan memusatkan header dengan text-align.

Contoh
http://jsfiddle.net/Vc8CB/

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.