이 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는 작업을 제공합니다. 언급 한 것처럼 li
s를 플로팅 한 다음 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>