CSS to line break ก่อน / หลังไอเท็ม `inline-block`

สมมติว่าฉันมี 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/

ทีนี้ลองนึกดูว่าฉันต้องการแยกสิ่งนี้ออกเป็นสามคอลัมน์ซึ่งเท่ากับการฉีด a <br>หลังจากสาม<li>อัน (จริง ๆ แล้วการทำเช่นนั้นจะไม่ถูกต้องทางความหมายและ syntactically)

ฉันรู้วิธีเลือกตัวที่สาม<li>ใน CSS แต่ฉันจะบังคับให้ตัวแบ่งบรรทัดหลังจากนั้นได้อย่างไร สิ่งนี้ไม่ทำงาน:

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

ผมยังไม่ทราบว่ากรณีนี้โดยเฉพาะอย่างยิ่งเป็นไปได้โดยใช้floatแทนแต่ผมไม่ได้สนใจในการแก้ปัญหาโดยใช้inline-block floatฉันรู้ว่าด้วยบล็อกความกว้างคงที่นี้เป็นไปได้โดยการตั้งค่าความกว้างบนพาเรนต์เป็นulประมาณ 3x ฉันไม่สนใจวิธีนี้ ฉันก็รู้ว่าฉันสามารถใช้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; 
}

คุณไม่สนใจ "วิธีแก้ไขปัญหา" มากมายสำหรับปัญหาของคุณ ฉันไม่คิดว่าจะมีวิธีที่ดีในการทำสิ่งที่คุณต้องการจะทำ ทุกสิ่งที่คุณแทรกโดยใช้:afterและcontentมีความถูกต้องทางไวยากรณ์และความหมายแบบเดียวกับที่มันจะทำถ้าคุณเพิ่งเขียนไว้ในนั้นเอง

เครื่องมือ CSS ให้การทำงาน คุณควรลอยlis แล้วclear: leftเมื่อคุณต้องการเริ่มบรรทัดใหม่ตามที่คุณพูดถึง:

ดูตัวอย่าง: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

เมื่ออนุญาตให้เขียน html ใหม่ได้คุณสามารถซ้อน<ul>s ไว้ใน<ul>และปล่อยให้การ<li>แสดงผลด้านในเป็นแบบอินไลน์บล็อก สิ่งนี้จะทำให้เกิดความหมายแบบ IMHO ในเชิงความหมายเนื่องจากการจัดกลุ่มยังสะท้อนอยู่ใน 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; }

การสาธิต

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

ฉันทำสิ่งนี้ได้สำเร็จโดยการสร้าง :: ก่อนตัวเลือกสำหรับองค์ประกอบอินไลน์แรกในแถวและทำให้ตัวเลือกนั้นเป็นบล็อกที่มีระยะขอบด้านบนหรือล่างเพื่อแยกแถวออกเล็กน้อย

.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 เท่านั้น แต่ฉันชอบที่จะหลีกเลี่ยง "float" มากที่สุดเท่าที่จะทำได้เพราะมันรบกวนความสูงของผู้ปกครอง

หากคุณใช้ jQuery คุณสามารถสร้างปลั๊กอิน `wrapN` แบบง่าย ๆ ที่คล้ายกับ` wrapAll 'ยกเว้นว่าจะล้อมองค์ประกอบ "N" เท่านั้นจากนั้นจะแบ่งและตัดองค์ประกอบ "N" ถัดไปโดยใช้ลูป จากนั้นตั้งค่าคลาส wrappers ของคุณเป็น `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/