¿Cómo alinear los elementos de un formulario con CSS?

cicklow dijo:

estas usando bootstrap, te conviene leer su ayuda...
CSS · Bootstrap seccion Inline form

Hacer clic para expandir...

kinorro dijo:

Hola, ante todo gracias por responder. Ya probé aplicarle la propiedad inline, pero no me funciona seguramente porque no estoy haciendo algo bien.

EL formulario en cuestión es un widget el cual no puedo (o no sé dónde) modificar las propiedades. Yo lo que hago es inspeccionar elemento con el navegador y sobrecargar los identificadores y las clases implicadas en el widget. Pero propiedades como inline no me hacen caso? Cómo tengo que hacerlo? Una ayuda por favor

Saludos

Hacer clic para expandir...

<form class="form-inline">
  <div class="form-group">
    <label for="d1">Llegada</label>
    <input type="datetime" class="form-control" id="d1" placeholder="">
  </div>
  <div class="form-group">
    <label for="d2">Salida</label>
    <input type="datetime" class="form-control" id="d2" placeholder="">
  </div>
  <div class="form-group">
    <label for="d3">Habitaciones</label>
    <select id="d3"><option>1</option><option>2</option><option>3</option></select>
  </div>
  <div class="form-group">
    <label for="d4">Adultos</label>
    <select id="d4"><option>1</option><option>2</option><option>3</option></select>
  </div>
  <button type="submit" class="btn btn-default">Ver Tarifas</button>
</form>

cicklow dijo:

es que no es solo una edición.. tienes que acceder al html y reeditar todo el formulario, se estan usando muchos divs anidados y mas que no vienen al caso y se hace demasiado complicado la edicion... crea un formulario con esos campos sin todos los divs ni demas cosas...

PHP:

<form class="form-inline">
  <div class="form-group">
    <label for="d1">Llegada</label>
    <input type="datetime" class="form-control" id="d1" placeholder="">
  </div>
  <div class="form-group">
    <label for="d2">Salida</label>
    <input type="datetime" class="form-control" id="d2" placeholder="">
  </div>
  <div class="form-group">
    <label for="d3">Habitaciones</label>
    <select id="d3"><option>1</option><option>2</option><option>3</option></select>
  </div>
  <div class="form-group">
    <label for="d4">Adultos</label>
    <select id="d4"><option>1</option><option>2</option><option>3</option></select>
  </div>
  <button type="submit" class="btn btn-default">Ver Tarifas</button>
</form>

https://jsfiddle.net/4eb7zv5k/ (redimenciona la linea central)

Hacer clic para expandir...

kinorro dijo:

Buenas. Gracias por responder


A esto le veo 2 cosas que no entiendo.

1. Si creo yo mismo el formulario como le doy la funcionalidad del widget? Dicho widget es un sistema de gestion de reservas, si creo yo mismo el fomulario no me sirve de nada, tengo que usar el del widget

2. Si creo el formulario yo mismo y asigno los identificadores y las clases del widget tendré dicha funcionalidad? SI es que sí, dónde debería de insertar el html? La web consta de 3 páginas estáticas de wordpress, el formulario me gustaría añadirlo a las 3


Saludos

Hacer clic para expandir...

cicklow dijo:

no encesariamente tiene que ser un widget... es un formulario normal en PHP+HTML... es un sitio en wordpress por lo que podes editar el theme agregando el formulario y todo lo necesario...

si aun asi quieres un widget: http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/

Hacer clic para expandir...

kinorro dijo:

Lo que digo es que el formulario que tenemos en este momento es un widget que tenemos instalado que es un sistema de gestion de reservas. El tema es que queremos editar el css de dicho widget, no crear uno aparte. Como podríamos hacerlo?

Saludos y gracias de antemano

Hacer clic para expandir...

kinorro dijo:

Lo he intentado pero esa es mi duda.

Inspecciono con firebug y encuentro los identificadores y las clases implicadas. Les añado a todas la propiedad float:left en el archivo principal de la plantillas style.css pero no me funciona.

Puedes ayudarme a ver qué tengo que aplicar?

Hacer clic para expandir...