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

Question

我在MVC4项目中有几个Razor页面,遵循可在此处查看的总体布局.每个页面都有一个fieldset,大多数都有一个Save或Next或任何类型的按钮.我真正喜欢和无法弄清楚的是如何让Save/Next/Whatever按钮始终位于右下角fieldset.我从其他几个问题尝试过解决方案,但遗憾的是似乎没有一个问题适用于这种情况.这甚至可能吗？

这是样式表.

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: 0并且right: 0将其放置在从右下角0像素,你可能想要把别的东西一样bottom: 5px right:5px

再次编辑:固定,初始命题不起作用,这是一个JSFiddle

再次编辑:使用Romias命题,将按钮放在div中并将div放在右下角,这里是更新后的JSFiddle

Answer 2

相对第一,然后绝对.

这真的很简单.第一步是将父容器的position属性设置为relative,如下所示:

<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标签添加一些边距(或者从右下角稍微拉开一点)来添加一些填充,抛出一些样式等.