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

我有两列，第一列在顶部

部分。标记面板
是我试图修复的列。我不希望
标记像那样浮动，直到发生其他事情

但是，我还需要默认列宽为
240px
。为了让我产生那种药丸按钮风格的感觉，我必须加入
float:left

^因此，这就产生了一个问题，即药片标签看起来是正确的，但当它们应该排列在一列中时，会漂浮在包装上。


下面的一列
部分.tags-panel2
是我试图实现的外观，但是我作弊，因为我正在缩小面板的宽度。标签药丸中的文本也不应该换行


如果没有它，您将如何实现这一点：



CSS:

也许你可以补充一下

clear：两者都有；

到标签上？这应该将它们分开，并使它们保持在垂直线上，因为您指定的要连接clear的div的左侧或右侧不允许有浮动元素。
谢谢！使用JavaScript太多，开始错过基本的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;
}