특정`inline-block` 항목 앞 / 뒤에 줄 바꿈하기위한 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/

이제 이것을 세 열로 나누고 싶다고 상상해보십시오. 세 번째 열 <br>뒤에 a를 주입하는 것과 같습니다 <li>. (실제로 그렇게하는 것은 의미 적으로나 구문 적으로 유효하지 않습니다.)

<li>CSS 에서 세 번째를 선택하는 방법을 알고 있지만 그 후에 줄 바꿈을 어떻게 적용합니까? 작동하지 않습니다.

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

문제에 대한 많은 "솔루션"에 관심이 없습니다. 나는 당신이하고 싶은 일을 실제로 할 수있는 좋은 방법이 없다고 생각합니다. 아무것도 당신은 사용하여 삽입 :after하고 content그냥 거기에 스스로를 쓴 경우 짓을하는 것과 같은 구문과 의미 론적 타당성을 가지고있다.

CSS는 작업을 제공합니다. 언급 한 것처럼 lis를 플로팅 한 다음 clear: left새 줄을 시작하려는 경우 :

예를 참조하십시오 : http://jsfiddle.net/marcuswhybrow/YMN7U/5/

html을 다시 쓸 수 있으면을 <ul>안에 중첩 <ul>시키고 내부 <li>를 인라인 블록으로 표시 할 수 있습니다 . 그룹화도 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만으로는 가능하지만 부모의 키를 방해하기 때문에 가능한 한 "float"를 피하는 것이 좋습니다.

jQuery를 사용하는 경우, "N"요소 만 랩핑 한 다음 루프를 사용하여 다음 "N"요소를 분리하고 랩핑한다는 점을 제외하면`wrapAll`과 유사한 간단한`wrapN` 플러그인을 작성할 수 있습니다. 그런 다음 래퍼 클래스를`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/