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

<div class="bbWrapper">Buenas. He intentado de todas las maneras alinear los elementos de este formulario mediante css y no ha forma. El sistema es externo pero puedo sobrecargar las clases e id´s inspeccionando con el navegador.<br /> <br /> El ponerlos todos en la misma linea con float: left lo doy por imposible, teniendo en cuenta que le he dado un tamaño fijo y nada sirve.<br /> <br /> Alguien me podría ayuda para poder ponerlos en la misma línea, y en caso contrario cerntrarlos todos?<br /> <br /> la web esta aquí: <a href="http://hotelnieves.es" target="_blank" class="link link--external" rel="nofollow ugc noopener">Hotel Nieves</a> y pongo un pantallazo:<br /> <br /> <script class="js-extraPhrases" type="application/json"> { "lightbox_close": "Cerrar", "lightbox_next": "Siguiente", "lightbox_previous": "Anterior", "lightbox_error": "El contenido solicitado no puede cargarse. Por favor, inténtalo de nuevo más tarde.", "lightbox_start_slideshow": "Iniciar presentación de diapositivas", "lightbox_stop_slideshow": "Detener presentación de diapositivas", "lightbox_full_screen": "Pantalla completa", "lightbox_thumbnails": "Miniaturas", "lightbox_download": "Descargar", "lightbox_share": "Compartir", "lightbox_zoom": "Zoom", "lightbox_new_window": "Nueva ventana", "lightbox_toggle_sidebar": "Alternar barra lateral" } </script> <a href="https://forobeta.com/attachments/f5b7ddbd21e7a5c6ecf0d6bd5accc682o-webp.78141/" target="_blank" class="js-lbImage"><img src="https://forobeta.com/data/attachments/60/60356-e428d64ebc16c2f1ab36db249634b51c.jpg?hash=6Tqy6fA0TG" class="bbImage " style="" alt="f5b7ddbd21e7a5c6ecf0d6bd5accc682o.webp" title="f5b7ddbd21e7a5c6ecf0d6bd5accc682o.webp" width="191" height="100" loading="lazy" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> Saludos y gracias de antemano</div>

<div class="bbWrapper">estas usando bootstrap, te conviene leer su ayuda...<br /> <a href="http://getbootstrap.com/css/#forms" target="_blank" class="link link--external" rel="noopener">CSS · Bootstrap</a> seccion <b>Inline form</b></div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="cicklow" data-source="post: 4050521" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4050521" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4050521">cicklow dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> estas usando bootstrap, te conviene leer su ayuda...<br /> <a href="http://getbootstrap.com/css/#forms" target="_blank" class="link link--external" rel="nofollow ugc noopener">CSS · Bootstrap</a> seccion <b>Inline form</b> </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote><br /> <br /> Hola, ante todo gracias por responder. Ya probé aplicarle la propiedad inline, pero no me funciona seguramente porque no estoy haciendo algo bien.<br /> <br /> 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<br /> <br /> Saludos</div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="kinorro" data-source="post: 4050563" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4050563" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4050563">kinorro dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> Hola, ante todo gracias por responder. Ya probé aplicarle la propiedad inline, pero no me funciona seguramente porque no estoy haciendo algo bien.<br /> <br /> 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<br /> <br /> Saludos </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote><br /> 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...<br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> PHP: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="php"><code>&lt;form class=&quot;form-inline&quot;&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d1&quot;&gt;Llegada&lt;/label&gt; &lt;input type=&quot;datetime&quot; class=&quot;form-control&quot; id=&quot;d1&quot; placeholder=&quot;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d2&quot;&gt;Salida&lt;/label&gt; &lt;input type=&quot;datetime&quot; class=&quot;form-control&quot; id=&quot;d2&quot; placeholder=&quot;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d3&quot;&gt;Habitaciones&lt;/label&gt; &lt;select id=&quot;d3&quot;&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d4&quot;&gt;Adultos&lt;/label&gt; &lt;select id=&quot;d4&quot;&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Ver Tarifas&lt;/button&gt; &lt;/form&gt;</code></pre> </div> </div><br /> <a href="https://jsfiddle.net/4eb7zv5k/" target="_blank" class="link link--external" rel="noopener">https://jsfiddle.net/4eb7zv5k/</a> (redimenciona la linea central)</div>

<div class="bbWrapper">Buenas. Gracias por responder<br /> <br /> <br /> A esto le veo 2 cosas que no entiendo. <br /> <br /> 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<br /> <br /> 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<br /> <br /> <br /> Saludos<br /> <br /> <span style="color: silver">- - - Actualizado - - -</span><br /> <br /> <blockquote data-attributes="" data-quote="cicklow" data-source="post: 4050566" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4050566" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4050566">cicklow dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> 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...<br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> PHP: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="php"><code>&lt;form class=&quot;form-inline&quot;&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d1&quot;&gt;Llegada&lt;/label&gt; &lt;input type=&quot;datetime&quot; class=&quot;form-control&quot; id=&quot;d1&quot; placeholder=&quot;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d2&quot;&gt;Salida&lt;/label&gt; &lt;input type=&quot;datetime&quot; class=&quot;form-control&quot; id=&quot;d2&quot; placeholder=&quot;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d3&quot;&gt;Habitaciones&lt;/label&gt; &lt;select id=&quot;d3&quot;&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;label for=&quot;d4&quot;&gt;Adultos&lt;/label&gt; &lt;select id=&quot;d4&quot;&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Ver Tarifas&lt;/button&gt; &lt;/form&gt;</code></pre> </div> </div><br /> <a href="https://jsfiddle.net/4eb7zv5k/" target="_blank" class="link link--external" rel="nofollow ugc noopener">https://jsfiddle.net/4eb7zv5k/</a> (redimenciona la linea central) </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote><br /> <br /> <br /> Buenas. Gracias por responder<br /> <br /> <br /> A esto le veo 2 cosas que no entiendo. <br /> <br /> 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<br /> <br /> 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<br /> <br /> <br /> Saludos</div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="kinorro" data-source="post: 4050568" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4050568" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4050568">kinorro dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> Buenas. Gracias por responder<br /> <br /> <br /> A esto le veo 2 cosas que no entiendo. <br /> <br /> 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<br /> <br /> 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<br /> <br /> <br /> Saludos </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote>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...<br /> <br /> si aun asi quieres un widget: <a href="http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/" target="_blank" class="link link--external" rel="noopener">http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/</a></div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="cicklow" data-source="post: 4053775" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4053775" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4053775">cicklow dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> 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...<br /> <br /> si aun asi quieres un widget: <a href="http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/" target="_blank" class="link link--external" rel="nofollow ugc noopener">http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/</a> </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote><br /> 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?<br /> <br /> Saludos y gracias de antemano</div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="kinorro" data-source="post: 4053837" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4053837" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4053837">kinorro dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> 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?<br /> <br /> Saludos y gracias de antemano </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote><br /> editar el widget lo mas posible para que respete el lineamiento de bottstrap</div>

<div class="bbWrapper">Lo he intentado pero esa es mi duda.<br /> <br /> 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.<br /> <br /> Puedes ayudarme a ver qué tengo que aplicar?</div>

<div class="bbWrapper"><blockquote data-attributes="" data-quote="kinorro" data-source="post: 4053851" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=4053851" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-4053851">kinorro dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> Lo he intentado pero esa es mi duda.<br /> <br /> 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.<br /> <br /> Puedes ayudarme a ver qué tengo que aplicar? </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote>bueno ahi vi, que lo que vos llamas widget es un formulario externo... de <a href="http://www.upbooking.com" target="_blank" class="link link--external" rel="noopener">  Free Reservation System Booking Engine White Label - upbooking</a> , fijate en las opciones de template o demas si tienes para editar el diseño directamente en el formulario y no desde tu style.css... porque el formulario es cargado desde javascript... veo tambien que permite cargar un cSS externo, tienes que ver cuales son los nombres de los ID o si en ese sitio tienen ayuda con los ID que usan asi puedes editar tdoo</div>

<div class="bbWrapper">1. En el sitio no tienen ninguna ayuda a lo que modificación de diseño se refiere<br /> <br /> 2. Mediante acceso ftp veo que en los archivos del plugin no existe ningun archivo css ni nnada referente al estilo. Supongo que lo carga de un sitio exsterno y por eso no se puede modificar. Lo que sí peudo es sobrecargar las clases e indentificadores que es lo que hago pero no sé muy bien como hacerlo. Algunas cosas me salen otras no. Dentro de las opciones del widget se le puede añadir un css. COm sería eso exactamente? Lo he preguntado en el soporte oficial pero me dicen que no pueden ayudarme!<br /> <br /> Tendría que aplicar ahí el float:left a todos los elementos ?<br /> <br /> <br /> Saludos</div>