CSS ngắt dòng trước / sau một mục `inline-block` cụ thể

Hãy nói rằng tôi có HTML này:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

và CSS này:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

Kết quả có thể xem tại đây: http://jsfiddle.net/YMN7U/1/

Bây giờ hãy tưởng tượng rằng tôi muốn chia nó thành ba cột, tương đương với việc tiêm a <br>sau cột thứ ba <li>. (Trên thực tế, việc đó sẽ không hợp lệ về mặt ngữ nghĩa và cú pháp.)

Tôi biết cách chọn thứ ba <li>trong CSS, nhưng làm cách nào để buộc ngắt dòng sau nó? Điều này không hoạt động:

li:nth-child(4):after { content:"xxx"; display:block }

Tôi cũng biết rằng trường hợp cụ thể này có thể bằng cách sử dụng floatthay vì inline-block, nhưng tôi không quan tâm đến các giải pháp sử dụng float. Tôi cũng biết rằng với các khối có chiều rộng cố định, điều này có thể thực hiện được bằng cách đặt chiều rộng trên bố mẹ ulthành khoảng 3x chiều rộng đó; Tôi không quan tâm đến giải pháp này. Tôi cũng biết rằng tôi có thể sử dụng display:table-cellnếu tôi muốn các cột thực sự; Tôi không quan tâm đến giải pháp này. Tôi quan tâm đến khả năng buộc phải nghỉ trong nội dung nội tuyến.

Chỉnh sửa : Để rõ ràng, tôi quan tâm đến 'lý thuyết', không phải là giải pháp cho một vấn đề cụ thể. CSS có thể tạo ra một ngắt dòng ở giữa các display:inline(-block)?phần tử, hoặc là không thể? Nếu bạn chắc chắn rằng điều đó là không thể, đó là một câu trả lời chấp nhận được.

Tôi đã có thể làm cho nó hoạt động trên các phần tử LI nội tuyến. Thật không may, nó không hoạt động nếu các phần tử LI là khối nội tuyến:

Bản demo trực tiếp: http://jsfiddle.net/dWkdp/

Hoặc phiên bản ghi chú trên vách đá:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

Bạn không quan tâm đến nhiều "giải pháp" cho vấn đề của mình. Tôi không nghĩ rằng thực sự có một cách tốt để làm những gì bạn muốn làm. Bất cứ điều gì bạn chèn bằng cách sử dụng :aftervà contentcó chính xác cú pháp và hiệu lực ngữ nghĩa giống như nó sẽ được thực hiện nếu bạn vừa tự viết nó vào đó.

Các công cụ CSS cung cấp công việc. Bạn chỉ nên thả nổi livà sau đó clear: leftkhi bạn muốn bắt đầu một dòng mới, như bạn đã đề cập:

Xem một ví dụ: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Khi viết lại html được cho phép, bạn có thể lồng <ul>s vào trong <ul>và chỉ để <li>màn hình bên trong hiển thị dưới dạng khối nội tuyến. Điều này cũng có nghĩa về mặt ngữ nghĩa IMHO, vì việc phân nhóm cũng được phản ánh trong html.

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

li li { display:inline-block; }

Bản giới thiệu

$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

h3 {
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
}
ul {
  margin: 0.5em auto;
  list-style-type: none;
}
li li {
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
}
img {
  width: 64px;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
  <li>
    <ul>
      <li><img />Smells Good</li>
      <li><img />Tastes Great</li>
      <li><img />Delicious</li>
    </ul>
  </li>
  <li>
    <ul>
      <li><img />Wholesome</li>
      <li><img />Eats Children</li>
      <li><img />Yo' Mama</li>
    </ul>
  </li>
</ul>

Một cách dễ dàng để phân chia danh sách thành các hàng là bằng cách thả các mục danh sách riêng lẻ và sau đó mục bạn muốn chuyển đến dòng tiếp theo bạn có thể xóa dấu phẩy.

ví dụ

<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

Tôi biết bạn không muốn sử dụng phao và câu hỏi chỉ là lý thuyết nhưng trong trường hợp bất cứ ai thấy điều này hữu ích, đây là một giải pháp sử dụng phao.

Thêm một lớp bên trái cho các liyếu tố của bạn mà bạn muốn nổi:

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

và sửa đổi CSS của bạn như sau:

li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}

http://jsfiddle.net/chut319/xJ3pe/

Bạn không cần chỉ định chiều rộng hoặc khối nội tuyến và hoạt động xa như IE6.

Tôi đã thực hiện điều này bằng cách tạo một :: trước bộ chọn cho phần tử nội tuyến đầu tiên trong hàng và làm cho bộ chọn đó thành một khối có lề trên hoặc dưới để tách các hàng một chút.

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

Lưu ý rằng điều này sẽ hoạt động, tùy thuộc vào cách bạn kết xuất trang. Nhưng làm thế nào về việc chỉ bắt đầu một danh sách không có thứ tự mới?

I E

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

Một giải pháp tốt hơn là sử dụng -webkit-cột: 2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

Có lẽ điều đó là hoàn toàn có thể chỉ với CSS nhưng tôi thích tránh "nổi" hết mức có thể vì nó cản trở chiều cao của cha mẹ.

Nếu bạn đang sử dụng jQuery, bạn có thể tạo một plugin `quấnN` đơn giản tương tự như` quấn ALL` ngoại trừ nó chỉ bao bọc các phần tử" N ", sau đó ngắt và bọc các phần tử" N "tiếp theo bằng một vòng lặp. Sau đó, đặt lớp bao bọc của bạn thành `display: block;`.

(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
           $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));

$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});

Đây là một JSFiddle của sản phẩm đã hoàn thành:

http://jsfiddle.net/dustinpoissant/L79ahLoz/