텍스트와 div를 단위로 묶기

Question

다음과 같이 단위로 묶을 수 있습니다. 이러한 클래스에 대한

<div class='tag-box'> 
    <a href=#>Axe Committee</a> 
    <div class='circle'><a href=#>x</a></div> 
</div> 

CSS의는 다음과 같습니다

가

.tag-box { 
    display:inline; 
} 

.circle { 
    display:inline; 
    padding-left:4px; 
    padding-right:4px; 
    background:rgb(196,15,24); /*dark red*/ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
} 

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 

    position:relative; top:-2px; 
} 

나는이 태그 박스의 위쪽의 20 ~ 30 인라인을 표시 할 수 있습니다. 문제는 줄 바꿈으로 인해 단어가 서로 끊어 지거나 링크에서 빨간색 원이 깨지는 것입니다. 이렇게하면 어떤 서클이 어떤 링크에 속하는 지 구분할 수 없습니다. (앞으로는 각 원이 링크와 관련된 다른 동작에 해당합니다.) 아래를 참조하십시오. alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png

어떻게 이런 종류의 포장이 일어나지 않도록합니까?

Answer 1

0 : white-space: nowrap;을 사용하십시오.

1 : .tag-box (또는 .circle)의 배경으로 원을 사용할 수 있습니다. 예 :

 
.tag-box { 
    display: inline; 
    background-image: url('circe.png'); 
    background-position: 100%; /* Display to the right */ 
    background-repeat: no-repeat; 
    padding-right: 10px /* To leave space for the image */ 
} 

2 : (/)

3 : 당신은 (기성품) 스크립트의 오른쪽에 원을 놓치면서 당신은 .tag 박스-ES는 부동 고정 된 크기를 사용할 수 있습니다 모든 ".circle는"

Answer 2

당신은 시도 할 수 :

.tag 박스 { 디스플레이 : 인라인 블록; 당신이 파이어 폭스 2와 IE

이전 버전의 몇 가지 문제가 발생할 수 있지만 }

는

Answer 3

당신은 인라인 (사용 가능한 모든 폭을 고려하지 않음)하지만 여전히 으로 간주 될 수 있도록 .tag-box의 각을 원한다 블록 (해당 내용을 반으로 잘라서는 안됨). 여기에 입력하십시오 ... 인라인 블록!)

;

http://pastebin.com/24tG7tCz 내가 더 나은 링크 태그 + 행동의 몇 가지의 목록을 나타 내기 위해 링크 목록을 사용 (당신이 divitis syndrome했습니다 나쁜 소식 :) 여기

는 완전한 HTML 코드

또한 제목을 추가했습니다. : 'x'링크는 전혀 액세스 할 수 없으며, 장애가 있거나 없거나 모두가 혼란 스러울 수 있습니다. x가 왼쪽 또는 오른쪽에있는 태그를 표시하지 않을지 확실하지 않기 때문입니다. 오른쪽에는 수십 개의 링크가 있는데, 각각은 텍스트 'x '! A 이라는 제목의 속성은 시각 장애인과 다른 사람들에게 도구 설명을 통해 실제적으로 x를 수행 할 것입니다. span 내부 a.x와

, 당신은 hover와 focus에 background-color을 변경할 수 있습니다, 그것은 범위 또는 DIV 내부로 가능하지 않을 것입니다.