특정 '인라인 블록' 항목 앞/뒤에 줄 바꿈 CSS

특정 '인라인 블록' 항목 앞/뒤에 줄 바꿈 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> 번째 세번이에 <li>(실제로 그렇게 하는 것은 의미론적으로나 구문적으로 타당하지 않습니다.)

세 번째를 선택하는 방법을 알고 있습니다.<li>CSS에서, 하지만 어떻게 하면 그 후에 줄 바꿈을 강제로 실행할 수 있습니까?이것은 작동하지 않습니다.

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

저는 또한 이 특별한 경우가 사용함으로써 가능하다는 것을 알고 있습니다.float에 inline-block하지만 저는 사용하는 솔루션에 관심이 없습니다.float 블록에서는 을 알고 .ul그 폭의 약 3배까지; 저는 이 해결책에 관심이 없습니다.는 또한 제가할있일은을 사용할 수 .display:table-cell실제 열을 원한다면 이 솔루션에는 관심이 없습니다.인라인 콘텐츠 내부에서 강제 중단 가능성에 관심이 있습니다.

편집: 분명히 말씀드리자면, 저는 특정 문제에 대한 해결책이 아닌 '이론'에 관심이 있습니다.CSS는 요소 중간에 줄 바꿈을 삽입할 수 있습니까, 아니면 불가능합니까?만약 당신이 그것이 불가능하다고 확신한다면, 그것은 받아들일 수 있는 대답입니다.

인라인 LI 요소에서 작동하도록 만들 수 있었습니다.그러나 LI 요소가 인라인 블록인 경우에는 작동하지 않습니다.

라이브 데모: http://jsfiddle.net/dWkdp/

또는 클리프 노트 버전:

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

당신은 당신의 문제에 대한 많은 "해결책"에 관심이 없습니다.저는 당신이 하고 싶은 것을 할 수 있는 좋은 방법이 있다고 생각하지 않습니다.사하여삽모항든목는하입을 사용하여 하는 모든 것.:after그리고.content당신이 직접 썼더라면 했을 것과 정확히 같은 통사적, 의미론적 타당성을 가지고 있습니다.

CSS가 작업을 제공하는 도구.당신은 그냥 물을 띄워야 합니다.li에 그고나 서리나서.clear: left다음과 같이 새 줄을 시작하려는 경우:

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

되면 html을 nest로 할 수 .<ul>의 시대의 s.<ul>에 그고내그내냥둬버려은면리▁the.<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;
}

더 나은 해결책은 -webkit-columns:2;

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

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

페이지를 렌더링하는 방법에 따라 이 기능이 작동하는지 확인합니다.하지만 새로운 순서가 없는 목록을 시작하는 것은 어떨까요?

예.

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

CSS만 있으면 완전히 가능할지도 모르지만 부모의 키를 방해하기 때문에 가능한 한 "부동"을 피하는 것이 좋습니다.

jQuery를 사용하는 경우 "N" 요소만 감싼 다음 루프를 사용하여 다음 "N" 요소를 끊어서 감싼다는 점을 제외하고 "wrapAll"과 유사한 간단한 "wrapN" 플러그인을 만들 수 있습니다.그런 다음 래퍼 클래스를 'display: block;delinde'로 설정합니다.

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

완성된 제품의 JSFidle은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/4609279/css-to-line-break-before-after-a-particular-inline-block-item