[html] 특정`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 {
     display: inline;
}
li:nth-child(3):after {
     content: "\A";
     white-space: pre;
}

<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 class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

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

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