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: 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 标记添加一些边距（或稍微远离右下角）以添加一些填充，抛出一些样式等。

Answer 3

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

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

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

3 个答案: