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

Question

我在 MVC4 项目中有几个 Razor 页面，它们遵循可以在此处查看的一般布局。每个页面都会有一个fieldset，并且大多数都会有一个 Save 或 Next 或任何类型的按钮。我真正想要但不知道的是如何让 Save/Next/Whatever 按钮始终位于fieldset. 我尝试了其他几个问题的解决方案，但遗憾的是似乎没有一个适用于这种情况。这甚至可能吗？

这是样式表。

Answer 1

将字段集放入并使用andposition:relative放入按钮，这应该适用于一个按钮，放置其他按钮，做同样的事情，但将正确的值更改为其他按钮的组合宽度。Position:Aboslutebottom:0right: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: 0并将right: 0其放置在距右下角 0 像素处，您可能需要放置其他内容，例如bottom: 5px right:5px

再次编辑：已修复，初始命题不起作用，这是一个JSFiddle

再次编辑：使用 Romias 提议，将按钮放在 div 中并将 div 放置在右下角，这是更新后的JSFiddle

Answer 2

先相对，后绝对。

这真的很简单。第一步是将父容器的位置属性设置为相对，如下所示：

<fieldset style="position: relative;">
    ...
</fieldset>

这将为您的下一个要定位的元素设置边界，只是这一次使用绝对定位。

<div style="position: absolute; bottom: 0; right: 0;">
    <input type="submit" value="Save" />
</div>

将两者放在一起：

<fieldset style="position: relative;">

    ...

    <div style="position: absolute; bottom: 0; right: 0;">
        <input type="submit" value="Save" />
    </div>
</fieldset>

在此之后，您可以为这个div标签添加一些边距（或从右下角拉开一点）以添加一些填充，添加一些样式等。

Answer 3

对按钮使用以下 CSS（请调整边距）

position: relative;
margin-top: 45%;
margin-left: 90%;