Wprowadź dane wejściowe w tym samym wierszu, co pole wejściowe

Question

Jest to prawdopodobnie proste, ale nie wiem, jak to zrobić. Obecnie z tym kodem przycisk "znajdź" znajduje się w wierszu pod polem wejściowym "lokalizacja". Jak sprawić, by działał w tym samym wierszu po prawej, jak większość pól wyszukiwania?

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%} 

link http://jsfiddle.net/VL3Dj/

Answer 1

Jeśli chcesz, aby pole tekstowe być 100% width oraz przycisk Poza tym można to zrobić tak: My Fiddle

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

Answer 2

To dlatego, że pole wprowadzania jest ustawiony na 100% szerokości, nie pozostawiając miejsca dla butto n obok niego.

Oto aa ustalona wersja: http://jsfiddle.net/ThfES/1/

Answer 3

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

Hi teraz dodać css

.fieldwrapper{ 
white-space: nowrap; 
} 

Live demo

Answer 4

Trzeba float elementów blokowych więc pojawiają się one side-by-side, że tak powiem. inline Elementy takie jak <a> i <span> robią to domyślnie. Dowiedz się więcej o modelu CSS Box.

Twoje rozwiązanie: http://jsfiddle.net/HBJtT/

EDIT: Utrzymanie input boiska 100% szerokości.

Potencjalne rozwiązanie: http://jsfiddle.net/3TZL8/

nie popieram to rozwiązanie jednak, jeśli motywacja do utrzymania pola tekstu wejściowego 100% szeroka jest tak, że przycisk i wygląd pola „płynnie razem”, należy użyć siatkę lub ramy interfejsu użytkownika. Lubię ram fundamentowych możliwe rozwiązanie można zobaczyć tutaj: http://foundation.zurb.com/docs/forms.php (Przewiń w dół do „Input o działaniu postfix” przykład)

Answer 5

spróbuj wykonać, szerokość: 50%

input.field{width:50%}​ 

Answer 6

można zrobić coś takiego ten (pracował w moim przypadku):

<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> 

Oto demo: http://jsfiddle.net/gn3qx6w6/1/

Answer 7

trzeba tylko wiedzieć, szerokość przycisku do jego pracy.Wtedy zasadniczo dajesz wejście pełnej szerokości, a pozycję absolutną przycisk po prawej. Wyściółka jest więc tekst nie siedzi za pomocą przycisku:

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

chodzi o CSS:

form { 
    position: relative; 
} 

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

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