Question

我目前正在开展一个新项目。我有一个div作为容器“容器”，里面有两个span标签; “标签”和“按钮”。按钮span标签内部有两个链接，我的css更改了一个标签，并将其设置为一个按钮（这没关系）。按钮span标签被告知向左浮动，并且设置宽度为182px。标签范围标记是文本描述的位置（并且具有设置的高度和背景颜色）。基本上它应该是这样的：

标签：[button1：button2]

全部在一条线上。方括号代表182px的固定宽度。

我遇到的问题是我无法弄清楚如何让“Label”占用剩下的空间。标签不能是固定宽度，因为无论容器的大小如何，我都希望能够使用相同的元素（这在页面之间有所不同）。但当我将其设置为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

使用块元素可以轻松完成。

#label元素会自动填充整个宽度（不需要宽度：100％）。如果你在元素的右边留下一个边距，让#buttons浮动到右边，这将完全符合你的要求。

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

在此处试试：http://jsfiddle.net/nPBak/1/

（注意你必须在#buttons之后移动#label）

制作两个跨度填补div;一个跨度是固定的，另一个不是？

1 个答案: