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

html css html-lists

— soliter
sumber

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

391

Kode ini akan menghapus lekukan dan daftar peluru.

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

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

— Zac
sumber

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

— pleerock
sumber

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/

— Smamatti
sumber