CSS bộ li thụt

Question

Googling và tìm kiếm stack overflow không trả lại bất kỳ kết quả mà tôi có thể nhận ra, vì vậy tha thứ cho tôi nếu điều này đã được hỏi trước ...

Tôi có thả xuống menu chính trong đó sử dụng danh sách làm căn bản . Vấn đề là, các danh sách rất rộng, và chúng không thụt lề đủ xa khi mở rộng. Vì vậy, đây là vấn đề của tôi! Làm cách nào để tôi kiếm được số tiền thụt lề trên các danh sách lớn hơn thông qua CSS?

Answer 1

để thụt một menu thả xuống ul, sử dụng

/* Main Level */ 
ul{ 
    margin-left:10px; 
} 

/* Second Level */ 
ul ul{ 
    margin-left:15px; 
} 

/* Third Level */ 
ul ul ul{ 
    margin-left:20px; 
} 

/* and so on... */ 

Bạn có thể thụt các li s và (nếu có) các a s (hoặc bất kỳ yếu tố nội dung bạn có) là tốt, mỗi với các hiệu ứng khác nhau. Bạn cũng có thể sử dụng padding-left thay vì margin-left, một lần nữa tùy thuộc vào hiệu ứng bạn muốn.

Cập nhật

Theo mặc định, nhiều trình duyệt sử dụng padding-left để thiết lập thụt đầu dòng đầu tiên. Nếu bạn muốn loại bỏ điều đó, hãy đặt padding-left: 0px;

Tuy nhiên, cả hai cài đặt margin-left và padding-left đều tác động đến việc thụt lề danh sách theo nhiều cách khác nhau. Cụ thể:margin-left tác động đến thụt lề ở bên ngoài đường biên của phần tử, trong khi padding-left ảnh hưởng đến khoảng cách ở bên trong đường viền của phần tử. (Learn more about the CSS box model here)

Đặt padding-left: 0; để các biểu tượng viên đạn của li treo ở rìa đường viền của phần tử (ít nhất là trong Chrome), có thể hoặc không thể là thứ bạn muốn.

Ví dụ về các padding-left vs margin-left và làm thế nào họ có thể làm việc cùng nhau trên ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Answer 2

li{ 
    margin-left:50px; 
} 

hoặc thay thế 50px bằng bất kỳ thứ gì bạn muốn.

Answer 3

Cũng thử:

ul { 
    list-style-position: inside; 
} 

Answer 4

padding-left là những gì điều khiển thụt đầu dòng của ul không margin-left.

So sánh: Đây là thiết lập padding-left đến 0px, chú ý rằng tất cả các thụt đầu dòng biến mất.

ul { 
 
    padding-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

và đây là thiết margin-left để 0px. Lưu ý rằng thụt đầu dòng KHÔNG thay đổi.

ul { 
 
    margin-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 5

tôi thấy rằng làm việc đó theo hai bước tương đối đơn giản dường như làm việc khá tốt. Định nghĩa css đầu tiên cho ul đặt thụt lề cơ sở mà bạn muốn cho toàn bộ danh sách.Định nghĩa thứ hai đặt giá trị thụt lề cho mỗi mục danh sách lồng nhau bên trong nó. Trong trường hợp của tôi, họ là như nhau, nhưng bạn rõ ràng có thể chọn bất cứ điều gì bạn muốn.

ul { 
    margin-left: 1.5em; 
} 

ul > ul { 
    margin-left: 1.5em; 
}