CSS untuk memecah baris sebelum / sesudah item `inline-block` tertentu

Katakanlah saya punya HTML ini:

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

dan CSS ini:

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

Hasilnya bisa dilihat di sini: http://jsfiddle.net/YMN7U/1/

Sekarang bayangkan saya ingin memecah ini menjadi tiga kolom, setara dengan menyuntikkan <br>setelah ketiga <li>. (Sebenarnya melakukan hal itu secara semantik dan sintaksis tidak valid.)

Saya tahu cara memilih yang ketiga <li>dalam CSS, tetapi bagaimana cara memaksa pemecah baris setelahnya? Ini tidak bekerja:

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

Saya juga tahu bahwa kasus khusus ini dimungkinkan dengan menggunakan floatalih-alih inline-block, tetapi saya tidak tertarik menggunakan solusi float. Saya juga tahu bahwa dengan blok lebar tetap ini dimungkinkan dengan mengatur lebar pada induk ulmenjadi sekitar 3x lebar itu; Saya tidak tertarik dengan solusi ini. Saya juga tahu bahwa saya dapat menggunakan display:table-celljika saya menginginkan kolom yang nyata; Saya tidak tertarik dengan solusi ini. Saya tertarik pada kemungkinan memaksa jeda dalam konten inline.

Sunting : Agar jelas, saya tertarik pada 'teori', bukan solusi untuk masalah tertentu. Bisakah CSS menyuntikkan satu baris di tengah display:inline(-block)?elemen, atau apakah itu mustahil? Jika Anda yakin itu tidak mungkin, itu adalah jawaban yang dapat diterima.

Saya sudah bisa membuatnya bekerja pada elemen LI inline. Sayangnya, itu tidak berfungsi jika elemen LI adalah inline-block:

Demo langsung: http://jsfiddle.net/dWkdp/

Atau versi catatan tebing:

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

Anda tidak tertarik pada banyak "solusi" untuk masalah Anda. Saya kira tidak ada cara yang baik untuk melakukan apa yang ingin Anda lakukan. Apa pun yang Anda masukkan menggunakan :afterdancontent memiliki validitas sintaksis dan semantik yang persis sama dengan yang akan dilakukan jika Anda baru saja menuliskannya di sana sendiri.

Alat CSS menyediakan pekerjaan. Anda hanya harus mengapung lidan kemudian clear: leftketika Anda ingin memulai baris baru, seperti yang telah Anda sebutkan:

Lihat sebuah contoh: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Ketika menulis ulang html diperbolehkan, Anda dapat membuat sarang <ul>di dalam <ul>dan membiarkan tampilan dalam <li>sebagai blok-inline. Ini juga semantik masuk akal IMHO, karena pengelompokan juga tercermin dalam 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; }

Demo

$(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>

Cara mudah untuk membagi daftar menjadi baris adalah dengan melayang item daftar individual dan kemudian item yang ingin Anda buka ke baris berikutnya Anda dapat menghapus float.

sebagai contoh

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

Saya tahu Anda tidak ingin menggunakan pelampung dan pertanyaannya hanya teori tetapi jika ada yang menemukan ini berguna, inilah solusi menggunakan pelampung.

Tambahkan kelas kiri ke lielemen Anda yang ingin Anda apung:

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

dan ubah CSS Anda sebagai berikut:

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

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

Anda tidak perlu menentukan lebar atau blok sebaris dan bekerja sejauh IE6.

Saya menyelesaikan ini dengan membuat pemilih :: before untuk elemen inline pertama di baris, dan membuat pemilih itu blok dengan margin atas atau bawah untuk memisahkan baris sedikit.

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

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

.2nd_item
{
  color: blue;
}

Perhatikan bahwa ini akan berhasil, tergantung bagaimana Anda merender halaman. Tetapi bagaimana kalau hanya memulai daftar unordered baru?

yaitu

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

Solusi yang lebih baik adalah menggunakan -webkit-kolom: 2;

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

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

Mungkin itu sepenuhnya mungkin dengan hanya CSS tetapi saya lebih suka menghindari "melayang" sebanyak yang saya bisa karena itu mengganggu ketinggian orang tua itu.

Jika Anda menggunakan jQuery, Anda dapat membuat plugin `wrapN` sederhana yang mirip dengan` wrapAll` kecuali itu hanya membungkus elemen "N" dan kemudian memecah dan membungkus elemen "N" berikutnya menggunakan loop. Kemudian atur kelas pembungkus Anda ke `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);
});

Berikut ini adalah JSFiddle dari produk jadi:

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