Làm thế nào để loại bỏ margin từ mọi phần tử là phần tử cuối cùng trong một hàng?

Question

Làm thế nào để loại bỏ số dư từ mỗi <li> của cột cuối cùng? Tôi yêu cầu cho mỗi <li> mà đi kèm trong cột cuối cùng khi tôi có 9 <li> và 3 trong mỗi cột. Tôi không yêu cầu chỉ để loại bỏ margin từ mục cuối cùng của cuối cùng <li> của một <ul> mà tôi đã biết :last-child { margin-right: 0 }

Và nếu màn hình là nhỏ hoặc người dùng thay đổi kích thước trình duyệt sau đó 3 + 3 + 3 có thể trở thành để 4 + 5 hoặc 2 + 2 + 2 + 2 + 1

Vì vậy, trong điều kiện bất kỳ bất kỳ <li> (nó có thể là một hoặc nhiều sau đó một) mà đi kèm trong cột cuối cùng. Tôi muốn xóa margin-right.

Tất cả li nằm trong một ul đơn

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7</li> 
    <li>item 8</li> 
    <li>item 9</li> 
</ul> 

tôi thêm jsfiddle đây: http://jsfiddle.net/GnUjA/1/

Answer 1

Edit: trả lời được viết lại sau khi nhìn vào mẫu HTML

gì bạn muốn làm là không thể với CSS. Lý do là bạn muốn tạo kiểu cho các phần tử dựa trên bố cục được hiển thị, CSS này chỉ cho phép bạn làm việc dựa trên cấu trúc tài liệu.

Một cái gì đó như thế này chỉ có thể đạt được với kịch bản phía máy khách (Javascript), có thể truy vấn các thuộc tính bố cục được hiển thị và hành động tương ứng.

Answer 2

Tôi tin rằng đây là những gì bạn muốn (jquery):

http://jsfiddle.net/PKstQ/

Nếu fiddle đó chứng tỏ những gì bạn đang tìm kiếm để làm gì (ngoại trừ với lợi nhuận thay vì background-color) thì bạn không thể làm với css. Bạn sẽ cần javascript. Nếu jquery là chấp nhận được thì fiddle được đăng có thể dễ dàng được sửa đổi. Sẽ là tương đối tầm thường để biến nó thành js tinh khiết là tốt.

Answer 3

Đối với tôi, điều đó có ý nghĩa hơn khi cho bên trái của ul một số phần đệm làm nổi bật nó ra.

Tôi nói thêm: ul { padding-left: 10px; }-http://jsfiddle.net/GnUjA/30/

Phụ thuộc nếu nó sẽ là cần thiết nhưng cùng thực sự đi vào top:

ul { padding-top: 10px; padding-left: 10px; }-http://jsfiddle.net/GnUjA/31/

Answer 4

Loại bỏ hoặc thêm stylings trên một yếu tố cụ thể của mỗi hàng không thể thực hiện với CSS thuần túy trừ khi bạn biết chính xác có bao nhiêu phần tử có trên mỗi hàng (thông qua họ bộ chọn của nth-child()).

Margins Negative

Những gì bạn có thể để làm trong trường hợp lợi nhuận là ngụy trang chúng bằng cách thêm lợi nhuận tiêu cực đến yếu tố phụ huynh.Điều này sẽ tạo ra ảo tưởng rằng yếu tố con của bạn phù hợp với bên trong phần tử cha mẹ trong khi vẫn có khoảng cách giữa các yếu tố cá nhân:

http://codepen.io/cimmanon/pen/dwbHi

ul { 
    margin-left: -5px; 
    margin-right: -5px; 
} 

li { 
    margin-left: 5px; 
    margin-right: 5px; 
} 

Chia lề trong nửa và đặt nó trên cả hai mặt (margin-left: 5px; margin-right: 5px) có thể cho kết quả tốt hơn so với một lề đơn trên một mặt (margin-right: 10px), đặc biệt nếu thiết kế của bạn cần làm việc với các hướng dẫn RTRT LRT và RTL.

Lưu ý: điều này có thể yêu cầu thêm overflow-x: hidden trên phần tử tổ tiên để ngăn cuộn ngang, tùy thuộc vào cách đóng phần tử vùng chứa vào cạnh của chế độ xem.

Truyền thông Queries

Nếu bạn một cách hợp lý có thể dự đoán có bao nhiêu mặt hàng có sẽ được cho mỗi hàng, bạn có thể sử dụng các truy vấn phương tiện truyền thông để nhắm mục tiêu cuối cùng trong hàng qua nth-child(). Điều này đáng kể hơn là sử dụng lề âm, nhưng nó sẽ cho phép bạn thực hiện các điều chỉnh kiểu khác:

@media (min-width: 400px) and (max-width: 499px) { 
    li:nth-child(even) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 

@media (min-width: 500px) and (max-width: 599px) { 
    li:nth-child(3n+3) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 

@media (min-width: 600px) and (max-width: 799px) { 
    li:nth-child(4n+4) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 
/* etc. */