다중 행간 작동 요소

복잡하지만 고정 된 크기의 다중 행 요소 목록을 표시하려는 경우 행 끝에 도달했을 때 페이지 줄을 감싸고 각 행에 n으로 나타나도록합니다. n 페이지 너비에 따라 다릅니다. 다음과 같이 입력하십시오 :다중 행간 작동 요소

Mary had Mary had Mary had 
a little a little a little 
LAMB  LAMP  WHISKEY 


Mary had 
a little 
TOO MUCH

어떻게해야합니까?

출처

2010-03-09 alemjerus

inline-block 스팬을 수행해야합니다

body { 
 
    font-family: sans-serif; 
 
} 
 
#container span { 
 
    display: inline-block; 
 
    width: 5em; 
 
    border: 1px solid black; 
 
}

<div id='container'> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
</div> 
 
</body> 
 

 
</html>

출처

2010-03-09 15:27:59

IE6에서는'inline-block '이 작동하지 않는다는 점에 유의해야한다.) –

@Andy E : 실제로, 그렇습니다.하지만 IE6는 보통 'inline'을 기본값으로 사용하는 요소에 대해서만'inline-block '을 설정하게하며, 보통'block '으로 기본 설정되는 요소에는 설정하지 않습니다. 나는 그 예를 위해 뒤로 기억했다. 그래서 나는 그것을 지금 고쳤다. :-) –

@ T.J. 좋은 분! :-) –

display: block;float:left; 및 원하는 width 및 height을 조합하여 사용하십시오.

span { 
    display: block; 
    float: left; 
    height: 100px; 
    width: 100px; 
}

출처

2010-03-09 15:26:56

수레는 나를 위해 너무 많은 이상한 일을. :-) –

@ T.J. 그래, 나는 그와 관련 될 수있다, 나는 인라인 블록이 IE6에서 작동한다는 것을 인식하지 못했다 ;-) –

그냥 * 간신히 ;;-) –

다중 행간 작동 요소

답변

관련 문제