搜索引擎中的术语气泡

Question

所以我会尽力描述我正在做的事情，但我认为一张图片会更加公正。

基本上我正在研究各种搜索引擎，引擎接受以逗号分隔的关键字。我希望它工作的方式是在用户输入一个术语并放一个逗号之后，该术语出现在搜索栏下方的“气泡”中，其大小适当，“x”允许他们删除该术语从他们的搜索。

以编程方式，我知道该怎么做。虽然我对如何制作图形有点困惑。我知道这是一个编程论坛，但我不确定是否应该为泡泡创建“基础”图形，然后根据搜索项的长度动态调整大小，或者是否有其他方法可以实现

思想？

编辑：哇，只记得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

您可以使用HTML 5方式向li / div添加圆角。

请查看border-radius属性。虽然并非所有（较旧的/ IE :)浏览器都支持。

或者

你可以做类似下面的内容（半伪代码）：

<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/

我只需使用相同的红色背景颜色设置左/右。您必须创建带有圆角的左/右图像。