css - 让两个 span 填充一个 div；一个跨度是固定的，另一个不是？

Question

我目前正在从事一个新元素。我有一个 div 充当容器“容器”，里面有两个 span 标签； “标签”和“按钮”。 buttons span 标签内部有两个链接，我的 css 更改了 a 标签并将其设置为按钮样式(这没问题)。 buttons span 标签被告知要向左浮动，并且设置宽度为 182px。label span 标签是文本描述所在的位置(并且具有设置的高度和背景颜色)。本质上它应该是这样的:

标签:[按钮 1 : 按钮 2]

全部在一行中。方括号代表固定宽度182px。

我遇到的问题是我不知道如何让“标签”占用剩余空间。标签不能是固定宽度，因为我希望无论容器的大小如何都可以使用相同的元素(这因页面而异)。但是当我将它设置为 100% 时，它会占用整行并将按钮推到新行上。

理想情况下，我希望能够使用一些像“100% - 182px”这样的 css，但我知道 css 不支持这个。有没有人对我可以做些什么来让这个工作有任何建议？

  <div id="container">
    <span id="label"><p>song title</p></span>
    <span id="buttons"><img src="resources/images/fill.gif" width="1" height="1"><a href="#" class="button88x31">edit</a><img src="resources/images/fill.gif" width="1" height="1"><a href="#" class="button88x31">delete</a></span>
  </div>

Answer 1

这可以通过 block 元素轻松完成。

#label 元素会自动填充整个宽度(不需要 width:100%)。如果您在元素右侧留出边距，并让#buttons 向右浮动，这将完全符合您的要求。

#label {
    display: block;
    margin-right: 100px;
}
#buttons {
    width: 100px;
    float: right;
}

在这里试试这个:http://jsfiddle.net/nPBak/1/

(注意你必须在#buttons 之后移动#label)