CSS'den belirli bir 'satır içi blok' öğesinden önce / sonra satır kesmesi

Diyelim ki bu HTML'ye sahibim:

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

ve bu CSS:

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

Sonuç burada görülebilir: http://jsfiddle.net/YMN7U/1/

Şimdi üç sütun, bir enjekte eşdeğer içine bu kırmak istiyorum hayal <br>üçte sonra <li>. (Aslında bunu yapmak anlamsal ve sözdizimsel olarak geçersiz olur.)

<li>CSS'de üçüncüyü nasıl seçeceğimi biliyorum , ama ondan sonra satır sonunu nasıl zorlarım? Bu çalışmıyor:

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

Bu özel durumun floatyerine kullanmakla da mümkün olduğunu biliyorum inline-block, ancak çözümlerle ilgilenmiyorum float. Ayrıca, sabit genişlikli bloklar ile bunun, ebeveyn üzerindeki genişliği ulyaklaşık 3x'e ayarlayarak mümkün olduğunu biliyorum ; Bu çözümle ilgilenmiyorum. Ayrıca display:table-cellgerçek sütunlar istersem kullanabileceğimi de biliyorum ; Bu çözümle ilgilenmiyorum. Satır içi içeriğin içinde bir mola verme olasılığıyla ilgileniyorum.

Edit : Açık olmak gerekirse, ben 'teori' ile ilgileniyorum, belirli bir sorunun çözümü değil. CSS, display:inline(-block)?öğelerin ortasına bir satır sonu enjekte edebilir mi, yoksa imkansız mı? Bunun imkansız olduğundan eminseniz, bu kabul edilebilir bir cevaptır.

Satır içi LI öğeleri üzerinde çalışmasını sağlayabildim. Ne yazık ki, LI elemanları satır içi blok ise çalışmaz:

Canlı demo: http://jsfiddle.net/dWkdp/

Veya uçurum notları sürümü:

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

Sorununuz için pek çok "çözüm" ile ilgilenmiyorsunuz. Gerçekten ne yapmak istediğinizi yapmanın iyi bir yolu olduğunu düşünmüyorum. Kullanarak eklediğiniz her şey:after vecontent tam olarak aynı sözdizimsel ve anlamsal geçerliliğe sahip olan herhangi bir şey, bunu kendiniz yazmış olsaydınız yapardı.

CSS araçları iş sağlar. Sadece lis'yi yüzmelisin ve sonraclear: left belirttiğiniz gibi yeni bir çizgiye başlamak istediğinizde:

Bir örneğe bakın: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Html'nin yeniden yazılmasına izin verildiğinde, <ul>içinde s yuvalayabilir <ul>ve yalnızca iç <li>satırın satır içi blok olarak görüntülenmesine izin verebilirsiniz . Gruplandırma html içine de yansıtıldığından, bu aynı zamanda anlamsal olarak IMHO anlamını da taşır.

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

gösteri

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

Listeleri satırlara bölmenin kolay bir yolu, tek tek liste öğelerini yüzerek ve ardından bir sonraki satıra gitmek istediğiniz öğeyi kayan noktadan temizlemektir.

Örneğin

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

Şamandıralar kullanmak istemediğinizi biliyorum ve soru sadece teoriydi, ancak herkesin bunu yararlı bulması durumunda, şamandıraları kullanan bir çözüm.

liYüzmek istediğiniz öğelerinize bir sınıf sol ekleyin :

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

ve CSS'nizi aşağıdaki gibi değiştirin:

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

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

Genişlikleri veya satır içi blokları belirtmenize gerek yoktur ve IE6'ya kadar çalışır.

Bunu, satırdaki ilk satır içi öğe için bir :: önce seçici oluşturarak ve bu seçiciyi satırları biraz ayırmak için üst veya alt kenar boşluğuna sahip bir blok haline getirerek başardım.

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

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

.2nd_item
{
  color: blue;
}

Sayfayı oluşturma şeklinize bağlı olarak bunun işe yarayacağından emin olun. Peki yeni sıralanmamış bir listeye başlamaya ne dersiniz?

yani

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

Daha iyi bir çözüm -webkit-column kullanmaktır: 2;

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

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

Belki sadece CSS ile tamamen mümkündür ama ebeveynin yüksekliğine müdahale ettiği için olabildiğince "şamandıradan" kaçınmayı tercih ederim.

JQuery kullanıyorsanız, yalnızca "N" öğelerini sarar ve sonra bir sonraki "N" öğelerini bir döngü kullanarak kırar ve sararsa, "wrapAll" a benzer basit bir "wrapN" eklentisi oluşturabilirsiniz. Ardından sarmalayıcı sınıfınızı `display: block; 'olarak ayarlayın.

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

İşte bitmiş ürünün bir JSFiddle:

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