Cách tạo trường nhập có độ rộng 100% trừ chiều rộng của nút gửi?

Question

Tôi có một trường nhập đơn cơ bản với nút 'gửi' cùng với nó. Nút tìm kiếm có chiều rộng cố định là 104 pixel. Cả hai đều được gói cùng với tổng chiều rộng 50% của chế độ xem trình duyệt. Đó là kế hoạch của tôi để cho phép trường đầu vào mở rộng khi cửa sổ trình duyệt mở rộng.

Hiện tại, đối với cửa sổ trình duyệt cụ thể của tôi, tôi phải sửa chiều rộng của trường nhập để trải rộng từ bên trái của trình bao bọc sang bên trái của nút gửi. Tuy nhiên, khi tôi thay đổi kích thước cửa sổ, nó (rõ ràng) không điều chỉnh cho phù hợp, và do đó để lại một khoảng trắng khoảng trắng.

Tôi chưa tìm thấy câu trả lời cho câu hỏi này ở bất kỳ nơi nào khác. Tôi biết rõ rằng thường có chiều rộng 100% với padding phải là 104px sẽ giải quyết vấn đề này với các phần tử nội tuyến khác. BAO GIỜ, vấn đề ở đây là nút dường như không thể ngồi trên đệm, thay vào đó chuyển sang một dòng mới.

Tôi có thể giải quyết vấn đề này bằng cách nào? Cảm ơn!

EDIT: Đây là những gì tôi có cho đến nay. Truy cập jsfiddle.net/nWCT8/ Toàn bộ trình bao bọc cần phải được căn giữa và cần phải có hỗ trợ đa số trình duyệt (mặc dù tôi không phiền nếu IE6 không hoạt động với nó). Vì lý do này, tôi không nghĩ 'calc' khá thích hợp.

Answer 1

Bởi vì bạn có một chiều cao cố định, bạn có thể sử dụng absolute vị trí để đạt được điều này (Nếu bạn không yêu cầu để hỗ trợ IE 6)

EDIT cập nhật cơ sở câu trả lời của tôi trên jsfiddle của bạn, nhưng tôi chỉ có thể kiểm tra nó trong Chrome, Safari và FF hiện tại.

jsfiddle

Để có được tự động mở rộng công việc thích hợp với FF bạn cần phải sử dụng một wrapper xung quanh nó và input nhu cầu phải có một chiều rộng của 100%. Để ngăn chặn các padding của input yếu tố để được thêm vào width các quy tắc css sau cần phải được sử dụng:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

box-sizing được hỗ trợ bởi: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT Styling input yếu tố thường có vấn đề vì padding của họ và margin. Để có kết quả bạn muốn đạt được không có tính năng css3 calc bạn cần làm các bước sau:

1. Xác định chiều cao đến .form-wrapper xung quanh và thiết lập của nó position-relative để yếu tố này chịu trách nhiệm về vị trí absolute của các phần tử chứa trong đó.

2. Quấn một container (.input-wrapper) xung quanh các yếu tố input định vị thế của mình như absolute với left:0px, top:0px, bottom:0px và right:[the width of your button] cách mà các wrapper luôn có một khoảng cách của width of the button về phía bên phải.

3. Đặt width và height của phần tử input thành 100%. Để ngăn chặn phần đệm của phần tử input được thêm vào số width, bạn cần đặt box-sizing thành border-box.

4. Set vị trí của button để absolute với top:0px, bottom:0px và right:0 và thiết lập chiều rộng để width: [width of your button]

Answer 2

Đối với trình duyệt mới hơn có hỗ trợ CSS3, bạn có thể sử dụng calc():

width: calc(100% - 50px); // change 50px to width of button 

Answer 3

html:

<div> 
    <input type="text" id="search" /> 
    <input type="button" value="Search" id="button" /> 
    <br class="clear: both;" /> 
</div> 

css:

* { 
    padding: 0; 
    margin: 0; 

} 

div { 
    width: 70%; 
    margin: 0 auto;  
    padding: 5px; 
    background: grey;  
} 

#search { 
    width: calc(100% - 110px);   
    float: left; 
} 

#button { 
    width: 104px; 
    float: left;  
} 

jsfiddle

Answer 4

Câu trả lời được lựa chọn hoạt động tốt, tuy nhiên, nó quá phức tạp. Viết lại câu trả lời cho được MUCH đơn giản:

HTML:

<div class="halfWidth"> 
    <div class="input-wrapper"> 
     <input type="text" placeholder="Input text here"/> 
    </div> 
    <button type="submit">Search</button> 
</div> 

CSS:

.halfWidth { 
    width:50%; 
} 
.input-wrapper { 
    margin-right:100px; 
} 
input { 
    float: left; 
    width: 100%; 
    -ms-box-sizing: border-box; /* ie8 */ 
    -khtml-box-sizing: border-box; /* konqueror */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    box-sizing: border-box; /* css3 rec */ 
} 

Xem ví dụ tại địa chỉ:
http://jsfiddle.net/nWCT8/4/