如何保持div的浮动宽度保持精确而不是100％？

Question

http://codepen.io/leongaban/pen/qEzaNr

我有2列，第一列位于顶部section.tags-panel是我正在尝试修复的列。我不希望tag的内容像那样漂浮，直到发生其他事情。

但是我还需要默认列宽为240px。为了让我创造出那种按钮式的感觉，我不得不放入float:left。

^因此，这会产生一个问题，即我的药丸标签看起来是正确的，但当它们应排成一列时浮动包装。

section.tags-panel2下面的列是我想要实现的外观，但是我在欺骗，因为我缩小了面板的宽度。标签药片中的文字也不应该包装。

如果没有它，你将如何实现这一目标：

CSS：

 section.tags-panel {
  width: 240px;
  height: 100%;
  background: #f7f7f7;
  border: 1px solid #ccc;
  overflow: auto;
}

section.tags-panel li { margin-right: 10px; }

.tag {
  overflow: hidden;
  float: left;
  position: relative;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  width: auto;
  border: 1px solid gray;
  background: #ccc;
}

Answer 1

也许你可以添加

clear: both;

标签？这应该将它们分开并将它们保持在垂直线上，因为在指定的div的左侧或右侧不允许使用浮动元素以清除连接。