Coloque un elemento de bloque en la parte inferior derecha de un conjunto de campos
Frecuentes
Visto 15,915 veces
4
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.
3 Respuestas
6
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.
6
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
0
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 css asp.net-mvc razor alignment or haz tu propia pregunta.
Muy buena pregunta y respuesta, pero el diseño general ya no funciona. - Luis Gouveia
@LuisGouveia - Ups, gracias por avisarme! Arreglado. - AJ.
stackoverflow.com/questions/33342144/… - Sachin
stackoverflow.com/q/33342144/4323579 por favor ayúdame aquí - Sachin