검색 엔진의 용어 거품

Question

그래서 나는 최선을 다해 노력 하겠지만 그림이 더 많은 정의를 내릴 것이라고 생각합니다.

는 기본적으로 나는 종류의 검색 엔진에서 일하고 있어요 엔진은 쉼표로 구분 된 키워드를 받아들입니다. 사용자가 용어를 입력하고 쉼표를 붙인 후 검색 바 아래에 단어가 적절하게 크기가 정해지고 단어를 삭제할 수있는 "x"가 표시됩니다. 그들의 수색에서.

프로그래밍 방식으로, 어떻게 해야할지 알고 있습니다. 나는 그래픽을하는 방법에 조금 붙어있다. 나는 이것이 프로그래밍 포럼이라는 것을 알고 있지만 거품에 대한 "기본"그래픽을 만들어서 검색 용어의 길이에 따라 동적으로 크기를 지정해야하는지, 아니면 다른 방법으로 그것을해야하는지 잘 모르겠습니다. .

생각하십니까?

EDIT : 와우, 방금 StackExchange가 'x'옵션을 원하지 않는 것을 정확히 수행 한 것을 기억합니다. 그것이 더 둥근 스타일을 제외하고는 내가 원하는 것입니다.

Answer 1

뭔가 :

span { 
    display: inline-block; 
    background: blue; 
    padding: 5px 10px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
} 

... 트릭을해야한다. 삭제 아이콘을 제외하고 그래픽으로 재생할 필요가 없습니다.

Answer 2

은 ...

http://kailoon.com/css-sliding-door-using-only-1-image/

을 슬라이딩 도어 기술을 사용하고 패딩 양쪽에 자동 폭을 가지고있다.

Answer 3

li의/div에 둥근 모서리를 추가하여 HTML 5 방향으로 이동할 수 있습니다.

이 경우 border-radius 속성을 확인하십시오. 모든 브라우저 (이전/IE :)에서 지원하지는 않습니다.

또는

당신은 follwing을 (반 의사) 같은 것을 만들 수 있습니다 이미지와 고정 폭과 모서리가 둥근 양쪽 (왼쪽/오른쪽)해야합니다

<div class="button"> 
    <div class="left"></div> 
    <div class="content">Term</div> 
    <div class="right"></div> 
</div> 

.button .left { background: url('image with the left part of the button'); width: the width of the image; } 
.button .right { background: url('image with the rightpart of the button'); width: the width of the image; } 
.button .content { background: gray; } 

. 그리고 고정 된 너비가없는 중간 내용 부분. 두 번째 방법의

편집

데모 이동 : http://jsfiddle.net/kc5ZC/4/

나는 바로 같은 붉은 배경색으로/왼쪽을 설정합니다. 둥근 모서리가있는 왼쪽/오른쪽 이미지를 만들어야합니다. 의 라인을 따라