在字段集的右下方放置一個塊元素

在MVC4項目中，我有幾個Razor頁面，它們遵循一般佈局，可以查看here。每個頁面將有一個fieldset，大多數將有一個保存或下一個或任何類型的按鈕。我真正喜歡並且無法弄清的是如何讓「保存/下一步/無所不在」按鈕始終位於fieldset的右下角。我試圖從a couple of其他questions解決方案，但遺憾的是似乎沒有適用於這種情況。這甚至有可能嗎？在字段集的右下方放置一個塊元素

這是stylesheet。

來源

2012-05-03 AJ.

非常好的問題和答案，但總體佈局不再工作。 –

@LuisGouveia - 哎呀，謝謝你讓我知道！修復。 –

http://stackoverflow.com/questions/33342144/how-to-make-fieldset-postion-fixed-in-asp-net-based-on-the-visibility – Sachin

把字段集在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: 5pxright:5px

再次編輯：固定的，最初的命題沒有工作，這裏有一個JSFiddle

編輯再次：隨着Romias命題，把按鈕一格，並在底部的DIV權不是位置，這裏是更新JSFiddle

來源

2012-05-03 14:54:06 DangerMonkey

最好的是把輸入放在一個div中來定位整個容器。 – Romias

@Romias你說得對，實際上最好是把div放在'position：absolute'中，'bottom：0'和'right：0'，然後把這些按鈕放在這個div裏，你可以根據自己的喜好定位它們。 – DangerMonkey

絕對完美。感謝JSFiddles，幫了大忙。 –

使用的按鈕下面的CSS（請調整頁邊距）

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

來源

2012-05-03 14:57:41 rt2800

相對第一，然後絕對。

真的很簡單。第一步是設置父容器的位置屬性相對如下：

<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標籤（或拉從右下角有點遠）來添加一些填充，扔在一些樣式等

來源

2012-05-03 15:17:56 rdev5

幾乎我所說的，除非你第一次嘗試，而不是3編輯後XD – DangerMonkey

在字段集的右下方放置一個塊元素

回答

相關問題