css - 将 block 元素放置在字段集的右下角

Question

我在一个 MVC4 元素中有几个 Razor 页面，它们遵循可以查看的一般布局 here .每个页面都有一个 fieldset，大多数页面都有一个 Save 或 Next 或任何类型的按钮。我真正喜欢但无法弄清楚的是如何让 Save/Next/Whatever 按钮始终位于 fieldset 的右下角。我尝试了来自 a couple of 的解决方案其他 questions ，但遗憾的是似乎没有一个适用于这种情况。这可能吗？

这是 stylesheet .

Answer 1

将字段集放在 position:relative 中，将按钮放在 Position:Aboslute 中，bottom:0 和 right:0 ，这应该适用于一个按钮，放置其他按钮，做同样的事情，但将正确的值更改为其他按钮的组合宽度。

例子:

.lower-right-button{
    position:absolute;
    bottom: 0;
    right: 0;
}
<fieldset style="position: relative">
<input type="submit" value="Save" class="lower-right-button">
<input type="submit" value="New" class="lower-right-button" style="right: 110 px">
</fieldset>

编辑:bottom 和 right 属性将元素的底部和右边缘与其容器的底部和右边缘对齐。在这种情况下，bottom: 0 和 right: 0 会将其放置在距右下角 0 像素的位置，您可能想要放置其他内容，例如 bottom : 5px 右:5px

再次编辑:已修复，初始提议无效，这里是 JSFiddle

再次编辑:根据 Romias 的提议，将按钮放在一个 div 中并将 div 放在右下角，这里是更新的 JSFiddle