Coloque un elemento de bloque en la parte inferior derecha de un conjunto de campos

Tengo varias páginas de Razor en un proyecto MVC4 que siguen un diseño general que se puede ver aquí. Cada página tendrá un fieldset, y la mayoría tendrá un botón Guardar o Siguiente o cualquier tipo de botón. Lo que realmente me gustaría y no puedo entender es cómo hacer que el botón Guardar/Siguiente/Lo que sea se coloque siempre en la esquina inferior derecha de la fieldset. He intentado soluciones de una pareja de otros preguntas, pero lamentablemente ninguno parece aplicarse a esta situación. ¿Es esto posible?

Este es el Hoja de estilo.

preguntado el 03 de mayo de 12 a las 15:05

Muy buena pregunta y respuesta, pero el diseño general ya no funciona. -

@LuisGouveia - Ups, gracias por avisarme! Arreglado. -

stackoverflow.com/q/33342144/4323579 por favor ayúdame aquí -

3 Respuestas

Poner el campo en position:relative y pon el boton Position:Aboslute con bottom:0 y right:0, esto debería funcionar para un botón, para colocar los otros, haga lo mismo pero cambie el valor correcto al ancho combinado de los otros botones.

Ejemplo:

.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>

EDITAR: los atributos inferior y derecho alinean el borde inferior y derecho del elemento con el borde inferior y derecho de su contenedor. En ese caso, bottom: 0 y right: 0 lo colocará en 0 píxeles desde la esquina inferior derecha, es posible que desee poner algo más como bottom: 5px right:5px

EDITAR DE NUEVO: Corregido, la propuesta inicial no funcionó, aquí hay un JSFiddle

EDITAR UNA VEZ MÁS: con la propuesta de Romia, coloque el botón en un div y coloque el div en la parte inferior derecha, aquí está la actualización JSFiddle

contestado el 03 de mayo de 12 a las 16:05

Lo mejor es poner las entradas en un div... para posicionar todo el contenedor. - Romías

@Romias Tienes razón, en realidad sería mejor poner el div en position: absolute con bottom:0 y right:0 y coloque los botones dentro de este div donde puede colocarlos como desee. - PeligroMono

Absolutamente perfecto. Gracias por los JSFiddles, ayudó mucho. - AJ.

Relativo primero, luego absoluto.

Es bastante simple en realidad. El primer paso es establezca la propiedad de posición del contenedor principal en relativo como sigue:

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

Esto se establecer los límites para que su próximo elemento sea posicionado, solo que esta vez, usando fotometría absoluta) posicionamiento

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

Poniendo los dos juntos:

<fieldset style="position: relative;">

    ...

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

Después de esto, puede agregar un margen a este div etiqueta (o sepárese un poco de la esquina inferior derecha) para agregar algo de relleno, agregar algunos estilos, etc.

contestado el 03 de mayo de 12 a las 16:05

Más o menos lo que dije, excepto que lo obtuviste en el primer intento en lugar de 3 editar más tarde XD - PeligroMono

use el siguiente CSS para los botones (ajuste los márgenes)

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

contestado el 03 de mayo de 12 a las 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.