Coloque la entrada en la misma línea que el cuadro de entrada

Esto es probablemente simple, pero no sé cómo hacerlo. Actualmente con este código, el botón "buscar" se encuentra en la línea debajo de la casilla de "ubicación" de entrada. ¿Cómo hago para que se siente en la misma línea a la derecha como funciona la mayoría de los cuadros de búsqueda?Coloque la entrada en la misma línea que el cuadro de entrada

HTML

<div class="fieldwrapper"> 
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" /> 
</div>

CSS

field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; } 
input.field{width:100%}

Enlace http://jsfiddle.net/VL3Dj/

Fuente

2012-10-12 James Willson

que sería genial si quieres poner este código en http://jsbin.com o http: //jsfiddle.net para que otros puedan comenzar a arreglar tu código en el lugar –

Ok! http://jsfiddle.net/VL3Dj/ –

Si desea que su cuadro de texto para ser 100% width y un botón además de que puede hacerlo de esta manera: My Fiddle

<input type="submit"value="Find" style="float: right" /> 
<div style="overflow: hidden; padding-right: .5em;"> 
    <input type="text" style="width: 100%;" /> 
</div>

Fuente

2012-10-12 12:25:37

Esta es la respuesta que estoy buscando. Gracias. No puedo marcar como respuesta durante 5 minutos. –

@JamesWillson De nada :) –

He luchado con esto durante años. ¿Alguien puede explicar por qué el desbordamiento: oculto lo hace funcionar y por qué no funciona sin él? –

Es debido a que su campo de entrada está dispuesto a ser el 100% de ancho, sin dejar espacio para el butto n al lado.

Aquí es AA versión fija: http://jsfiddle.net/ThfES/1/

Fuente

2012-10-12 12:25:10

Supongo que necesita un campo de texto 100% –

@Alien Quizás lo haga, el mío es solo una de las docenas de posibles sugerencias. Si él prefiere tu solución, entonces estoy seguro de que la marcará como la respuesta. –

Sí, quiero el campo de texto al 100%, lo siento. –

...... ...... Demo

Hola ahora añade esta css

.fieldwrapper{ 
white-space: nowrap; 
}

Live demo

Fuente

2012-10-12 12:26:43

Necesitas float elementos de bloque de forma que aparecen lado a lado, por así decirlo. inline elementos como <a> y <span> hacen esto de forma predeterminada. Obtenga más información sobre el modelo de CSS Box.

Su solución: http://jsfiddle.net/HBJtT/

EDIT: Mantener input campo como 100% amplia.

solución potencial: http://jsfiddle.net/3TZL8/

No apoyo esta solución, sin embargo, si su motivación para mantener el campo de texto de entrada 100% amplia es para que el botón y el aspecto campo "juntos sin problemas", debe utilizar una cuadrícula o un marco de UI. Me gusta marco de la Fundación, una posible solución puede ser visto aquí: http://foundation.zurb.com/docs/forms.php (desplácese hacia abajo para "Entrada con una acción de sufijo" ejemplo)

Fuente

2012-10-12 12:27:11

Sin embargo, no funciona con la caja de 100% de ancho: http://jsfiddle.net/HBJtT/5/ –

Consulte la edición. No estoy seguro de por qué quieres mantener el elemento de entrada al 100% de ancho, ¿puedes explicarlo? Gracias. –

trate de seguir, ancho: 50%

input.field{width:50%}

Fuente

2012-10-12 12:28:18 Kaf

Usted puede hacer algo como esto (trabajó en mi caso):

<div style="width:150px"><p>Start: <input type="text" id="your_id"></p> 
    </div> 

<div style="width:130px;margin-left: 160px;margin-top: -52px"> 
<a href="#" data-role="button" data-mini="true">Button</a> 
</div>

Aquí es una demostración: http://jsfiddle.net/gn3qx6w6/1/

Fuente

2014-09-30 08:24:52

Sólo es necesario conocer el ancho del botón para que funcione.Entonces básicamente le das a la entrada un ancho completo y colocas el botón absoluto a la derecha. El relleno es por lo que no se sienta texto detrás del botón:

<form method="post" action=""> 
     <input type="text" name="search-str" id="search-str" value=""/> 
     <button type="submit">Submit</button> 
    </form>

En cuanto a la CSS:

form { 
    position: relative; 
} 

input { 
    width: 100%; 
    padding-right: 40px; 
} 

button { 
    width: 40px; 
    position: absolute; 
    top: 0; 
    right: 0; 
}

Fuente

2014-11-19 11:37:18

Coloque la entrada en la misma línea que el cuadro de entrada

Respuesta

Cuestiones relacionadas