nowraps 사이 감싸기

Question

인라인으로 표시해야하는 링크 목록이 있습니다. 문제는 링크 중간에 텍스트를 감싸고 싶지 않다는 것입니다. 포장해야하는 경우 사이에 링크가 있어야합니다.

따라서 내 링크에 white-space:nowrap; 속성을 추가했습니다. 그러나 결과 링크 목록 결코은 내 div 상자를 감싸고 벗어납니다.

어떻게 내 링크를 감싸는 목록을 만들 수 있습니까? 고맙습니다!

<div class="box"> 
<p> 
<a href="mylink1" class="mytag">Hello there</a> 
<a href="mylink2" class="mytag">Hello you</a> 
<a href="mylink3" class="mytag">Hello people</a> 
<a href="mylink4" class="mytag">Hello world</a> 
</p> 
</div> 

관련 CSS는 그냥 여기 신비로운 아무것도 없다

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    white-space:nowrap; 
} 
.mytag:hover{ 
    background-color:#FFE5B5; 
} 

Answer 1

기본적으로, white-space:nowrap;을 그것이 무엇을 가정하고 정확히 여러 요소로 나누지 않고 있습니다.

실제로 찾고있는 것은 링크를 한 줄에 표시하고 링크를 다음 줄로 줄이지 않고 표시하는 것입니다. 따라서 display 속성을 inline-block으로 사용하십시오. 당신이 맞다

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    display: inline-block; 
} 

Answer 2

- 컨테이너가 특정 widhth이있는 경우가 자동으로 링크 사이에 포장한다 : http://jsfiddle.net/RZfd2/