Loại bỏ vết lõm ul bằng CSS

154

Tôi dường như không thể xóa thụt lề khỏi danh sách không có thứ tự của mình khi các hàng dài trong danh sách của tôi bao quanh. Đây là danh sách của tôi như sau:

Người dùng Windows có thể sử dụng putty
Người dùng Mac có thể sử dụng Terminal.app
Người dùng Linux có thể sử dụng SSH userid@ourserver.com port 22
...........> Hoặc sử dụng chương trình SFTP như Cyberduck chỉ vào ........................... ..............> ourserver.com, cổng 22

(các dấu chấm hiển thị các vết lõm)

Tôi đã đọc một loạt các giải pháp và đã thử đặt lề và phần đệm về 0, sử dụng văn bản thụt lề, kiểu danh sách, nhưng không có gì hoạt động. Tôi nghĩ vấn đề là có một tiêu đề phía trên danh sách mà tôi cần phải tập trung và vì vậy tôi đang đặt lề thành tự động và sau đó nó làm rối danh sách bên dưới. Nhưng ngay cả khi tôi nói hai div bên trong div cha, nó không hoạt động.

Đây là HTML / CSS (Tôi đã bao gồm mọi thứ trong trường hợp có một số cài đặt khiến tất cả các giải pháp khác không thành công)

<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

— độc thân
nguồn

Tôi đặt nó trong một câu đố ... điều này có vẻ đúng với tôi jsfiddle.net/qeqtK

— tedski

jsfiddle cho những ai muốn xem nó ... hoặc chỉ sử dụng liên kết của tedski;)

ah nhưng bạn đã kiểm tra "CSS bình thường hóa", đó không phải là những gì bạn thường thấy :)

— tedski

391

Mã này sẽ loại bỏ vết lõm và liệt kê đạn.

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

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

— Zac
nguồn

1

Cảm ơn vì sự trả lời. Tôi đã tìm ra vấn đề bây giờ. Tôi đã sử dụng: body {text-align: centre;}

— solerous

9

-webkit-padding-start: 0;

sẽ loại bỏ phần đệm được thêm bởi công cụ webkit

— pleerock
nguồn

0

Xóa cái này khỏi #info:

    margin-left:auto;

Thêm phần này cho tiêu đề của bạn:

#info p {
    text-align: center;
}

Bạn có cần chiều rộng cố định vv? Tôi loại bỏ ý kiến của tôi không cần thiết và tập trung vào tiêu đề text-align.

Mẫu
http://jsfiddle.net/Vc8CB/

— Smamatti
nguồn