特定の「インラインブロック」アイテムの前/後に改行するCSS

私がこのHTMLを持っているとしましょう：

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

そしてこのCSS：

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

結果はここで見ることができます：http : //jsfiddle.net/YMN7U/1/

これを3つの列に分割したいとします<br>。3番目の列の後にaを注入するのと同じこと<li>です。（実際にそれを行うと、意味的および構文的に無効になります。）

<li>CSSで3番目を選択する方法を知っていますが、その後に改行を強制するにはどうすればよいですか？これは動作しません：

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

この特定のケースがのfloat代わりにを使用して可能であることも知っていますがinline-block、を使用したソリューションには興味がありませんfloat。また、固定幅ブロックでは、親の幅をulその幅の約3倍に設定することでこれが可能であることも知っています。このソリューションには興味がありません。また、display:table-cell実際の列が必要な場合に使用できることも知っています。このソリューションには興味がありません。インラインコンテンツ内で強制的に中断する可能性に興味があります。

編集：明確にするために、私は特定の問題の解決策ではなく、「理論」に興味があります。CSSはdisplay:inline(-block)?要素の途中で改行を挿入できますか、それとも不可能ですか？不可能だと確信しているなら、それは許容できる答えです。

インラインLI要素で機能させることができました。残念ながら、LI要素がインラインブロックの場合は機能しません。

ライブデモ： http : //jsfiddle.net/dWkdp/

またはクリフノートバージョン：

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

あなたはあなたの問題の多くの「解決策」に興味がありません。あなたがやりたいことをする良い方法は本当にないと思います。:afterand を使用して挿入したものcontentもので、自分で記述した場合とまったく同じ構文的および意味的妥当性があります。

CSSが提供するツール。あなたが言及したように、あなたは単にlisをフロートさせ、次にclear: leftあなたが新しい行を始めたいときに：

例を参照してください：http : //jsfiddle.net/marcuswhybrow/YMN7U/5/

htmlの書き換えが許可されている場合は、を<ul>内にネスト<ul>して、内部<li>のsをインラインブロックとして表示できます。グループ化もHTML内に反映されるため、これは意味的にIMHOにも意味があります。

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

デモ

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

リストを行に分割する簡単な方法は、個々のリスト項目をフロートし、次にフロートをクリアできる次の行に移動する項目をフロートすることです。

例えば

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

あなたがフロートを使いたくなかったのは知っていて、問題は単なる理論でしたが、誰かがこれが便利だと思った場合のために、フロートを使った解決策があります。

liフロートさせたい要素に左クラスを追加します。

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

次のようにCSSを修正します。

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

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

幅やインラインブロックを指定する必要はなく、IE6までさかのぼって動作します。

これを実現するには、行の最初のインライン要素に:: beforeセレクターを作成し、そのセレクターに行を少し区切るために上部または下部のマージンを持つブロックにします。

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

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

.2nd_item
{
  color: blue;
}

ページのレンダリング方法によっては、これが機能することを確認してください。しかし、新しい順不同リストを開始するだけではどうでしょうか？

すなわち

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

より良い解決策は-webkit-columns：2;を使用することです。

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

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

たぶんそれはCSSだけで完全に可能ですが、親の高さを妨げるので、できるだけ「フロート」を避けることを好みます。

jQueryを使用している場合は、「wrapAll」と同様のシンプルな「wrapN」プラグインを作成できます。ただし、「N」要素のみをラップし、ループを使用して次の「N」要素を分割およびラップします。次に、ラッパークラスを「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);
});

これが完成した製品のJSFiddleです。

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