css - 如何在调整窗口大小时保持 Rally 单选按钮字段的大小相同

Question

在我当前的应用程序中，我有一个位于窗口左上角的无线电场。我给这个组件一个类名“radio-buttons”，并为组件提供了以下css：

.radio-buttons {
    margin-left: 70px;
    margin-top: 30px;
    border: dotted;
}

边框是点的，所以我可以看到组件的轮廓。每次我调整窗口大小时，单选按钮字段都会缩小到足够小，以至于根本看不到按钮。仍然可以看到虚线边框，所以我知道该组件仍在应用程序中，只是大幅缩小。我尝试添加：

position: fixed;

到单选按钮类，但这并没有帮助。任何帮助将不胜感激！[希望这是一个简单的修复]

score 1 · Accepted Answer

因此，我在 StackOverFlow 之外搜索了我的问题，并找到了以下链接：

该站点回答了“如何调整面板大小”的问题，而不是阻止面板调整大小，但我窃取了以下代码行并将其放入我的“单选按钮”类中：

position: absolute;

现在我的单选按钮字段不会在调整窗口大小时自行调整大小！基本上我所要做的就是改变

position: fixed;

至

position: absolute;

这是我的最后一个 css 类，它使单选按钮保持在适当的位置：

.radio-buttons {
    position: absolute;
    margin-left: 70px;
    margin-top: 30px;
}

score 0 · Accepted Answer

在 CSS 中，您可以指定类或 ID 的最小宽度和高度。尝试以下操作：

.radio-buttons {
  margin-left: 70px;
  margin-top: 30px;
  border: dotted;
  width: 20%;
  height: 20%;
  min-width: 50px;
  min-height: 50px;
}

这会将宽度和高度设置为窗口大小的 20%，除非小于 50 像素。

2 回答 2