Question

所以我有这个：

  <style>
    div {
      position: absolute;
      top: 15px;
      width: 500px;
      background-color: lightblue;
    }

  </style>
  <div>
    <input type="submit" style="float: left" value="leftButton">
    <input type="submit" style="float: right" value="rightButton">

  </div>

an absolutely positioned button bar

我想要的：如果用户调整窗口大小并使其小于500px，则按钮应该靠近在一起而不是添加滚动条。这有可能吗？

Answer 1

使用指定为百分比的宽度。

width: 80%;

如果您需要，可以将其与：

结合使用

min-width: 30px;

用于覆盖用户尺寸太小而无法放入div中的项目的情况。

如果您想要灵活的按钮宽度，只需将它们放在表格行中，其中使用百分比指定表格单元格。然后，当用户调整宽度时，它们将调整大小。再次，您可以结合最小宽度和填充等，以保持适当的间距。例如

<table style="width:90%;">
    <tr>
        <td style="width:10%;"></td>
        <td style="width:80%;"></td>
        <td style="width:10%;"></td>
    </tr>
</table>

Answer 2

修改的

有一个解决方案！

width: 70%; max-width: 500px;

这会使您的条形调整到窗口宽度，但不会超过500px。（也可选择添加最小宽度）

绝对定位div的动态宽度

2 个答案: