4

MVC4プロジェクトにいくつかのRazorページがあり、ここで表示できる一般的なレイアウトに従います。各ページには、がfieldsetあり、ほとんどのページには[保存]または[次へ]または任意の種類のボタンがあります。私が本当に望んでいて理解できないのは、[保存]/[次へ]/[何でも]ボタンを常にの右下隅に配置する方法fieldsetです。私は他のいくつかの質問から解決策を試みましたが、残念ながら、この状況に当てはまるものはないようです。これも可能ですか？

これがスタイルシートです。

4

3 に答える 3

6

最初に相対、次に絶対。

それは本当にとても簡単です。最初の手順は、次のように親コンテナーの位置プロパティを相対に設定することです。

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

これにより、次の要素が配置される境界が設定されますが、今回は絶対配置を使用します。

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

2つをまとめると：

<fieldset style="position: relative;">

    ...

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

この後、このdivタグに余白を追加して (または右下隅から少し離して) パディングを追加したり、スタイルを追加したりできます。

于 2012-05-03T15:17:56.053 に答える
6

フィールドセットposition:relativeを配置し、ボタンを と で配置しますPosition:Aboslute。bottom:0これright:0は 1 つのボタンで機能し、他のボタンを配置するには、同じことを行いますが、正しい値を他のボタンの結合幅に変更します。

例：

.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 および right 属性は、要素の下端および右端をそのコンテナーの下端および右端に揃えます。その場合、右下隅から 0 ピクセルbottom: 0にright: 0配置します。bottom: 5px right:5px

再度編集: 修正済み、最初の命題は機能しませんでした。ここにJSFiddleがあります

もう一度編集: Romias の提案では、ボタンを div に配置し、代わりに div を右下に配置します。更新されたJSFiddleは次のとおりです。

于 2012-05-03T14:54:06.877 に答える
0

ボタンには次の CSS を使用します (余白を調整してください)

position: relative;
margin-top: 45%;
margin-left: 90%;
于 2012-05-03T14:57:41.260 に答える