将块元素放置在底部
我在MVC4项目中有几个Razor页面,它们遵循可在此处查看的一般布局。 每个页面都有一个fieldset
,大多数页面都有一个Save或Next或任何类型的按钮。 我真的很想和无法弄清楚是如何得到保存/下/无论按钮总是在的右下角位置fieldset
。 我试图从其他一些问题的解决方案,但遗憾的是似乎没有适用于这种情况。 这甚至有可能吗?
这是样式表。
将字段放置在position:relative
并将按钮置于Position:Aboslute
bottom:0
和right:0
Position:Aboslute
,这应该适用于一个按钮,放置其他按钮,做同样的事情,但将正确的值更改为组合宽度其他按钮。
例:
.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
相对第一,然后绝对。
这真的很简单。 第一步是将父容器的位置属性设置为相对 ,如下所示:
<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标签添加一些边距(或稍微拉开右下角)以添加一些填充,并添加一些样式等。
使用以下CSS按钮(请调整边距)
position: relative;
margin-top: 45%;
margin-left: 90%;
链接地址: http://www.djcxy.com/p/75793.html