1

Tengo los siguientes campos en un formulario y quiero que estén acomodados como en la imagen, pero no logro alinearlos ni poner los textos en esa forma, ademas quiero agregar otros campos debajo y que igual estén alineados de esa manera, como le puedo hacer con css? no estoy usando bootstrap

<f:view>
    <h:form id="form_pruebas" class="form-horizontal">
        <p:panel>

             

             <div class="container">

             <div class="form-group">

                <h:outputLabel for="intentosAp" value="Intentos de aplicación" style="display: inline-block width: 70px"/>&nbsp;&nbsp;&nbsp;

                <h:inputText id="intentosAp" value="" style="width: 60px;" required="true" maxlength="2"/>

     

                <h:outputLabel for="intentosExi" value="Intentos exitosos:" style="display: inline-block width: 25px"/>&nbsp;&nbsp;&nbsp;

                <h:inputText id="intentosExi" value="" style="width: 60px;" required="true" maxlength="3"/>

     

                <h:outputLabel for="intentosFall" value="Intentos fallidos" style="display: inline-block width: 50px"/>&nbsp;&nbsp;&nbsp;

                <h:inputText id="intentosFall" style="width: 60px;" value="" required="true" maxlength="3"/>

            </div>
            </div>
        </p:panel>

    </h:form>
</f:view>
       

introducir la descripción de la imagen aquí

2
  • esa solo es una imagen de como quiero que se vean mis inputs, es como un boceto, pero así como esta mi codigo se ve horizontal pero amontonado, y los labels no se ven asi como quiero
    – Root93
    Commented el 29 jun. 2020 a las 22:53
  • 3 campos, y abajo metere igual otros tres, pero no se como acomodar los labels para que se vean asi y no todo el texto seguido
    – Root93
    Commented el 29 jun. 2020 a las 22:55

1 respuesta 1

1

No se si será la mejor opción pero propongo

Dado que no uso JSF me limité a recrear un ejemplo con HTML para describir como pudieras resolverlo:

  • Envolvemos en un div interno en el form a todos los elementos que serían tanto las labels como los inputs
  • A este div por medio de su clase, le damos un display flex, para que sus elementos sean flexibles
  • Necesitamos resetear el ancho de los inputs, entonces los recuperamos por medio de su clase
  • Para separar a la derecha a cada uno de los inputs de su vecino label le damos un margin de 30px
  • Aplicamos los mismos pasos para el segundo grupo de 3 elementos
  • Solo varía por que mediante la pseudoclase nth-child eligo al div del segundo grupo y le doy un margin superior para separarlos

Propuesta:

    <style>
      .formulario {
        border: 1px solid;
        margin: 0 auto;
        width: 600px;
      }
      .formulario-container {
        display: flex;
      }
      .formulario-container__caja {
        margin: 0 30px 0 5px;
        width: 50px;
      }
      .formulario-container:nth-child(2) {
        margin-top: 10px;
      }
    </style>
    <form class="formulario" action="">
          <div class="formulario-container">
            <label for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
            <label for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
            <label for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
          </div>
          <div class="formulario-container">
            <label class="etiqueta-aviso" for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
            <label class="etiqueta-aviso" for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
            <label class="etiqueta-aviso" for="intentos">Intentos de Aplicación</label>
            <input class="formulario-container__caja" type="text">
          </div>
    </form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.