html - 将文本和 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

您希望每个 .tag-box 都是内联(不占用所有可用宽度)但仍被视为 block (其内容不应减半)。这里输入 ... inline-block!

这是一个完整的 HTML 代码:http://pastebin.com/24tG7tCz

我使用了一个链接列表来更好地表示一对链接标签+操作的列表(坏消息:你有一个divitis syndrome ;))

我还添加了titles:您的“x”链接根本无法访问并且可能会让每个人都感到困惑，无论是否有任何障碍，因为一个是永远不确定 x 是否会抑制左侧或右侧的标签:有许多链接，每个链接都带有文本“x”! a 元素上的 title 属性通过工具提示告诉盲人用户和其他人该 x 真正做什么。

通过 a.x 中的 span，您可以在 hover 和 focus 上更改 background-color，它不可能在 span 或 div 内使用。