CSS làm textbox điền vào tất cả chiều rộng có sẵn

Question

anh có chữ "dòng" sau đây trong trang web của tôi

<div style="width:100%"> 
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button> 
</div> 

Việc kiểm soát thả xuống tôi không thực sự có thể kiểm soát chiều rộng, vì nó kích thước để phù hợp với bất cứ điều gì dài nhất giá trị tùy chọn là. Các Nút có chiều rộng cố định. Làm thế nào tôi có thể nhận được TextBox để điền vào tất cả các chiều rộng còn lại có sẵn?

Tôi đã thử đặt nó vào một bảng nhưng chạy vào cùng một vấn đề, tức là làm cách nào để làm cho tất cả các cột khác càng nhỏ càng tốt để vừa với nội dung của chúng và sau đó cột TextBox lấp đầy chiều rộng còn lại?

Giải pháp Hacky là tốt nếu cần thiết, từ lâu tôi đã từ bỏ bất kỳ giả vờ thậm chí quan tâm đến các tiêu chuẩn CSS khi thật khó để làm điều đơn giản nhất.

Sửa: để làm rõ, bởi TextBox Ý tôi là <input type="text"/>

Answer 1

Tôi biết đây là một câu hỏi cũ nhưng giải pháp đúng không có ở đây vì vậy chỉ cần trong trường hợp ai đó tìm thấy Có cách đây:

Giải pháp là để bọc các textbox trong một khoảng.

HTML:

<label>Input</label> 
<span> 
    <input/> 
</span> 

CSS:

label { 
    float: left; 
} 

input { 
    width: 100%; 
    box-sizing:border-box; 
} 

span { 
    display: block; 
    overflow: hidden; 
} 

Xem this fiddle cho một ví dụ (nay là hơi quá hạn như tôi loại bỏ đệm ủng hộ sử dụng cửa hộp trên đầu vào).

Answer 2

Bạn có thể thiết lập độ rộng của hộp văn bản đến 100% (với css như bạn đã làm với các div), vì vậy nó sẽ được kéo dài đến mức độ đầy đủ của nó là cha mẹ (giả sử thẻ cha mở rộng toàn màn hình).

Answer 3

tôi xin đề nghị như sau:

<div style="width:100%; white-space:nowrap"> 
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button> 
</div> 

Answer 4

Cách duy nhất tôi nhìn thấy nó khả thi là với Javascript, vì vậy bạn sẽ có được chiều rộng của div (tính bằng pixel), trừ kích thước hiện tại của các điều khiển khác và thêm kết quả như với đầu vào. Điều đó sẽ yêu cầu bạn đặt văn bản bên trong một điều khiển nhịp (để bạn có thể nhận được kích thước của nó).

Answer 5

Đặt chiều rộng của textbox thành 100% với thuộc tính css display: inline;?

Answer 6

Đây là những gì phù hợp với tôi. Lưu ý rằng trong một số trường hợp, tôi đã phải sử dụng   giữa các mục nếu không nó rơi xuống dòng tiếp theo.

.flexContainer { 
 
    display: flex; 
 
    width:100%; 
 
} 
 
input { 
 
    width: 100%; 
 
}

<div class="flexContainer"> 
 
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label> 
 
</div>

Answer 7

Đây không phải là doable trong CSS như xa như Chrome là có liên quan. Cách khả thi là bằng cách thao tác size attribute của điều khiển biểu mẫu thông qua JavaScript. Nếu chiều dài của chuỗi là 25, hãy cộng thêm ít nhất 10 cho khoảng trống.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long --> 
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" /> 

JavaScript/jQuery

<script> 
    var value = jQuery('#textbox1').val();     // 43 
    jQuery('#textbox1').attr('size', value.length + 10); // resizes the textbox 
</script> 

Một lựa chọn khác cũng là bởi trước tính toán kích thước từ một kịch bản back-end.

PHP/HTML

<?php 
$value = "The quick brown fox jumps over the lazy dog"; 
?> 
<input type="text" value="<?php echo $value; ?>" size="<?php echo (strlen($value) + 10); ?>" />