Đặt đầu vào gửi trên cùng một dòng như hộp đầu vào

Question

Điều này có lẽ đơn giản nhưng tôi không biết cách thực hiện. Hiện tại với mã này, nút "tìm" nằm trên dòng bên dưới hộp "vị trí" đầu vào. Làm thế nào để tôi đặt nó trên cùng một dòng ở bên phải giống như hầu hết các hộp tìm kiếm hoạt động?

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

Liên kết http://jsfiddle.net/VL3Dj/

Answer 1

Nếu bạn muốn hộp văn bản của bạn sẽ được 100% width và một nút bên cạnh nó, bạn có thể làm điều đó như thế này: 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

Đó là bởi vì lĩnh vực đầu vào của bạn được thiết lập để được rộng 100%, để lại không gian cho the butto n bên cạnh nó.

Đây là aa phiên bản cố định: http://jsfiddle.net/ThfES/1/

Answer 3

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

Hi bây giờ thêm css này

.fieldwrapper{ 
white-space: nowrap; 
} 

Live demo

Answer 4

Bạn cần phải float yếu tố khối để chúng xuất hiện side-by-side, vì vậy để nói chuyện. inline các yếu tố như <a> và <span> làm điều này theo mặc định. Tìm hiểu thêm về mô hình Hộp CSS.

giải pháp của bạn: http://jsfiddle.net/HBJtT/

EDIT: Giữ input lĩnh vực như 100% rộng.

giải pháp tiềm năng: http://jsfiddle.net/3TZL8/

Tôi không ủng hộ giải pháp này tuy nhiên, nếu động lực của bạn để giữ trường văn bản đầu vào 100% rộng là để các nút và giao diện trường "liền mạch với nhau", bạn nên sử dụng một mạng lưới hoặc một khung giao diện người dùng. Tôi thích khuôn khổ Foundation, một giải pháp khả thi có thể được nhìn thấy ở đây: http://foundation.zurb.com/docs/forms.php (Cuộn xuống "Input với một hành động postfix" chẳng hạn)

Answer 5

Hãy thử sau, width: 50%

input.field{width:50%}​ 

Answer 6

Bạn có thể làm một cái gì đó như này (làm việc trong trường hợp của tôi):

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

đây là một bản demo: http://jsfiddle.net/gn3qx6w6/1/

Answer 7

Bạn chỉ cần phải biết chiều rộng của nút cho nó để làm việc.Sau đó, bạn về cơ bản cung cấp cho đầu vào một chiều rộng đầy đủ và vị trí tuyệt đối nút bên phải. Padding như vậy là không có văn bản nằm sau nút:

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

Đối với CSS:

form { 
    position: relative; 
} 

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

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