metadatos - ¿Cómo le digo a mi HTML que dos elementos deben ocupar el resto del ancho restante disponible?
meta tags generator (4)
Tengo tres campos de entrada y un gráfico de búsqueda en un DIV más grande
<div style="vertical-text-align:center;">
<form id="search-form" action="//search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%; min-width: 100px;">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%; min-width: 100px;">
<input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width: 40%; min-width:100px;">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</form> </div>
Me gustaría que el tercer campo de búsqueda y el ícono de la lupa ocupen el ancho restante porque cuando intento especificar un ancho como lo hago en este violín - https://jsfiddle.net/stndbt2u/2/ , el gráfico de lupa se ajusta a la siguiente línea, incluso si hay espacio suficiente para mostrar todo. ¿Cómo mantengo siempre la lupa y el tercer campo de búsqueda en la misma línea y los hago ocupar el resto del ancho disponible?
Tenga en cuenta que si hay menos de 580 píxeles (el ancho máximo del contenedor primario), está bien, y es preferible, si el tercer campo de búsqueda y la lupa se ajustan a la siguiente línea.
El examen de la página en Fiddle con la función "Inspeccionar" de Chrome mostró que el contenedor principal (la etiqueta del formulario con id = "forma_buscar") tiene un ancho de 540 píxeles , no de 580 píxeles .
Además, parece que se agrega espacio adicional entre cada elemento de texto de entrada para agregar otros 6 píxeles entre estos elementos.
Sumando el ancho de las dos entradas de nombre (2 X 135), la entrada de evento (216), el icono de lupa (40) y el espacio extra entre estos elementos (3 X 6), arroja un total de 544 píxeles . Como este ancho es mayor que el ancho del contenedor principal, el último elemento (el icono de la lupa) se desplaza a la siguiente línea.
Sospecho de la pantalla: CSS de celda de tabla utilizado por las definiciones de clase de los elementos de entrada. En su lugar, intente usar display: inline-block y vea si eso reduce el espacio entre los elementos de entrada.
Si eso no funciona, se debe realizar algún otro ajuste de ancho para que el contenedor principal pueda contener todos estos elementos en una sola línea.
Necesita configurar todas las entradas en una sola envoltura (con posición relativa) y establecer el ancho para ellas en porcentaje y hacer una posición absoluta para el vidrio. Mira:
body{
background:#ccc;
}
.parent-wrapper{
float:left;
width:100%;
text-align:center;
}
#searchForm, #searchForm *{
box-sizing: border-box;
outline:none;
}
#searchForm{
border-radius:5px;
background:#FFF;
padding:20px;
box-sizing:border-box;
max-width:580px;
display:inline-block;
}
#searchForm form{
width:100%;
position:relative;
}
#searchForm .input{
padding:0 5px;
float:left;
width:25%;
}
#searchForm .search-wrapper{
width:50%;
float:left;
padding-right:50px;
}
#searchForm .search-wrapper .input{
width:100%;
}
#searchForm .searchField{
float:left;
border-radius:5px;
border:1px solid #ccc;
padding:0 10px;
height:40px;
width:100%;
}
#searchForm .search_button{
position:absolute;
right:0;
}
@media (max-width: 400px) {
#searchForm .search-wrapper,#searchForm .search-wrapper .input {
width:100%;
}
#searchForm form{
padding-right:0;
}
#searchForm .input {
width:50%;
}
#searchForm .search-wrapper{
margin-top:10px;
}
}
<div class="parent-wrapper">
<div id="searchForm">
Search For Results<br>
<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="input">
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
</div>
<div class="input">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
</div>
<div class="search-wrapper">
<div class="input">
<input type="text" name="event" id="event" placeholder="Event" class="searchField">
</div>
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</div>
<div style="clear:both;"></div>
</form>
</div>
</div>
y las entradas de wrapp como en bootstraps lo que usa columnas y agrega tamaño de caja. Mejor solo revise y aprenda los estilos que proporcioné.
Si está dispuesto a conformarse con una solución exclusiva de CSS y sacrifica cierto grado de incompatibilidad con los navegadores más antiguos, la solución CSS Flexbox es su mejor opción. Básicamente, configuraremos dos escenarios:
A: cuando la ventana gráfica es más grande que 620px
Cálculos: 580px del ancho máximo del formulario de inicio de sesión, y 20px cada uno de los rellenos izquierdo y derecho
#first_name que #first_name y #last_name tengan el ancho de 20%, permitan que #event crezca para ocupar el espacio restante, y que el .search_button tenga una dimensión fija de 40 por 40px.
Esto significa que la siguiente regla funcionará:
#search-form {
display: flex; /* Enable flexbox */
flex: 1 0 auto; /* Breakdown:
flex-grow: 1 (allow elements to grow)
flex-shrink: 0 (prevent elements from collapsing)
flex-basis: auto (allow width to determine element dimensions)
*/
}
#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */
B: cuando la ventana gráfica es más pequeña que 620px
Los mismos cálculos que arriba.
Flexbox no envuelve elementos por defecto e intenta ajustarlos en una sola línea. No queremos este comportamiento en el escenario de ventana estrecha, ya que solicitó que el formulario se divide en varias líneas. Por lo tanto, al usar flex-wrap: wrap se forzará el ajuste (line-breaking en cierto sentido).
Todavía queremos #first_name y #last_name para ocupar todo el ancho. Simplemente podemos usar width: 50% para que sumen hasta 100% . Como el ajuste está habilitado, asegúrese de que su suma no exceda el 100% si está agregando bordes (sin usar box-sizing: border-box; en los elementos de entrada) y / o márgenes, necesitará usar width: calc(50% - x) para garantizar que se ocupen de estos espacios adicionales.
En la segunda fila, tenemos #events y .search_button . Todavía queremos mantener .search_button a 40 px de ancho, pero queremos que #events expandan para llenar todo el espacio en la segunda fila. Esto se puede hacer declarando el width: calc(100% - 40px) en #events .
Recuerde envolver todo esto en una consulta @media con un max-width establecido en 620px:
@media (max-width: 620px) {
#search-form {
flex-wrap: wrap;
}
#first_name, #last_name { width: 50%; }
#event { width: calc(100% - 40px); }
}
Para ver un viñeta de prueba de concepto, consulte este enlace: https://jsfiddle.net/teddyrised/382fhxpc/ . Tenga en cuenta que he eliminado la display: table y otros estilos CSS en línea. Tratemos de evitar el uso de CSS en línea si es posible.
También he incrustado un ejemplo como un fragmento de código:
body {
background-color:grey;
}
#logo {
margin: 0 auto;
padding: 10px;
}
#searchForm {
padding: 20px;
}
#search-form {
display: flex;
flex: 1 0 auto;
}
#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */
#loginLogos {
margin: 0 auto;
padding: 20px;
}
#loginArea {
border-radius: 25px;
font-size: 20px;
padding: 20px;
background-color: #ffffff;
color: #000000;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 580px;
}
@media (max-width: 620px) {
#search-form {
flex-wrap: wrap;
}
#first_name, #last_name { width: 50%; }
#event { width: calc(100% - 40px); }
}
.searchField {
line-height: 40px;
font-size: 22px;
margin: 0;
padding: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
}
<div id="loginArea">
<div id="searchForm">
Search For Results
<br />
<div>
<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
<input type="text" name="event" id="event" placeholder="Event" class="searchField">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
</div>
</div>
Solución: https://jsfiddle.net/stndbt2u/5/
Simplemente agregue float: izquierda a las entradas, y un ancho máximo para la imagen de 10% (ya que tiene 25 + 25 + 40). Si desea que la tercera entrada y la imagen vayan a la siguiente línea cuando el ancho del formulario no sea suficiente, agregue clear: left a esa tercera entrada en una consulta de medios.
Este es el código:
#search-form input{
float:left;
}
input.search_button {
max-width:10%;
}
@media (max-width: 580px) {
input#event {
clear:left;
}
}