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都内联（不占用所有宽度）但仍被视为块（其内容不应该是'切成两半）。这里输入... inline-block ！

以下是完整的HTML代码：http://pastebin.com/24tG7tCz

我使用列表链接来更好地代表几个链接标记+动作的列表（坏消息：你有divitis syndrome;））

我还添加了标题：您的“x”链接根本无法访问，并且可能会让所有人感到困惑，无论是否有任何障碍，因为我们无法确定x将禁止左侧或右侧的标记：有几十个链接，每个链接都带有文本“x”！ a元素上的 title 属性通过工具提示告诉盲人用户和其他所有人真正做那个x。

使用span内部斧头，您可以更改background-color和hover上的focus，内部 span < / em>或 div 。

Answer 2

0：使用white-space: nowrap;。

1：您可以将圆圈作为.tag-box（或.circle a）的背景。例如：

.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：您可以使用固定大小的浮动.tag-box-es（：/）

3：你可以在每个“.circle a”的右边放一个（现成的）脚本。

Answer 3

你可以尝试：

.tag-box { display：inline-block; }

虽然你可能会遇到一些firefox 2和旧版IE的问题

将文本和div包装为一个单元

3 个答案: