Làm thế nào để làm cho phần tử lấp đầy chiều rộng còn lại, khi anh chị em có chiều rộng thay đổi?

Question

Trong ví dụ bên dưới:

Tôi muốn hộp văn bản lấp đầy tất cả không gian có sẵn. Vấn đề là chiều rộng thả xuống không thể sửa được, vì các phần tử của nó không tĩnh. Tôi muốn giải quyết điều này chỉ với css (không javascript nếu có thể).

Tôi đã thử các giải pháp đề xuất cho những câu hỏi tương tự mà không bất kỳ may mắn :(

Đây là fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/

Dưới đây là html:

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">General</option> 
       <option value="2">Fruits</option> 
       <option value="3">Ice Creams</option> 
       <option value="4">Candy</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

Và đây các css:

#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-block; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 

Answer 1

Updated demo   (thử nghiệm tốt trong IE7/8/9/10, Firefox, Chrome, Safari)

• phao bên trái và các yếu tố đúng.
• Trong mã nguồn HTML, đặt cả hai phần tử nổi trước tiên (đây là phần quan trọng nhất).
• Cung cấp phần tử ở giữa overflow: hidden; và chiều rộng implict là 100%.
• Đặt hộp văn bản ở phần giữa ở độ rộng 100%.

.category_dropdown_container { 
 
    float: left; 
 
} 
 

 
input[type="submit"] { 
 
    float: right; 
 
    ... 
 
} 
 

 
.resizable_text_box { 
 
    padding: 0 15px 0 10px; 
 
    overflow: hidden; 
 
} 
 
.resizable_text_box input { 
 
    width: 100%; 
 
}

<div class="category_dropdown_container"> 
 
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
 
     ... 
 
    </select> 
 
</div> 
 

 
<input name="commit" type="submit" value="Ask!" /> 
 

 
<div class="resizable_text_box"> 
 
    <input id="question_text_box" name="question[what]" 
 
      placeholder="Write a query..." type="text" /> 
 
</div>

Answer 2

Thay đổi một số t thành phần ống <span> đến <div> yếu tố; sau đó float:left phân chia xung quanh danh sách thả xuống của bạn; sau đó cung cấp cho một trong những quyền một overflow:hidden và các yếu tố đầu vào bên trong nó một width:100%;.

Here's an example. Here it is again with a bigger drop down.

---

Ngoại trừ ốc vít lên nút gửi. Vì vậy, hãy đặt #form_wrapper vị trí không tĩnh (position:relative) và vị trí nút gửi hoàn toàn. Xem this fiddle và this one.

Answer 3

Thuộc tính hiển thị css tương đối gần đây 'flex' giải quyết vấn đề này cho bạn:

Tất cả bạn cần làm là thay đổi hình thức của display-inline-flex, cho .resizable_text_boxflex-grow: 100; và tặng #question_text_boxwidth: 100%

F ví dụ ull từ OP:

<style> 
#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-flex; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
    flex-grow: 100; 
} 
#question_text_box { 
    width: 100% 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 
</style> 

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">Options</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

Flex-box cho phép bạn làm những gì bạn muốn làm với css trong 15 năm - cuối cùng ở đây!Thông tin thêm: https://css-tricks.com/snippets/css/a-guide-to-flexbox/