Kiểu phần tử đầu vào để điền vào chiều rộng còn lại của vùng chứa

Hãy nói rằng tôi có một đoạn mã html như thế này:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

Đây không phải là mã chính xác của tôi, nhưng điều quan trọng là có nhãn và kiểu nhập văn bản trên cùng một dòng trong một thùng chứa có chiều rộng cố định. Làm thế nào tôi có thể định kiểu đầu vào để lấp đầy chiều rộng còn lại của container mà không cần bọc và không biết kích thước của nhãn?

nhiều như mọi người ghét bảng để bố trí, họ giúp đỡ với những thứ như thế này, bằng cách sử dụng thẻ bảng rõ ràng hoặc sử dụng display: cell-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Đây là một giải pháp đơn giản và gọn gàng mà không cần sử dụng JavaScript hoặc hack bố cục bảng. Nó tương tự như câu trả lời này: Nhập văn bản chiều rộng tự động điền 100% với các phần tử khác trôi nổi

Điều quan trọng là phải bọc trường đầu vào bằng một nhịp display:block. Điều tiếp theo là nút phải đến trước và trường đầu vào thứ hai.

Sau đó, bạn có thể thả nút sang phải và trường đầu vào sẽ lấp đầy khoảng trống còn lại.

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

Một câu đố đơn giản: http://jsfiddle.net/v7YTT/90/

Cập nhật 1: Nếu trang web của bạn chỉ nhắm mục tiêu đến các trình duyệt hiện đại, tôi khuyên bạn nên sử dụng các hộp linh hoạt . Ở đây bạn có thể thấy sự hỗ trợ hiện tại .

Cập nhật 2: Điều này thậm chí hoạt động với nhiều nút hoặc các yếu tố khác chia sẻ đầy đủ với trường đầu vào. Đây là một ví dụ .

Tôi đề nghị sử dụng Flexbox:

Hãy chắc chắn để thêm tiền tố nhà cung cấp thích hợp mặc dù!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Vui lòng sử dụng flexbox cho việc này. Bạn có một container sẽ uốn con của nó thành một hàng. Đứa trẻ đầu tiên lấy không gian của nó khi cần thiết. Cái thứ hai uốn cong để lấy tất cả không gian còn lại:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Cách dễ nhất để đạt được điều này sẽ là:

CSS:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

Hình như: http://jsfiddle.net/JwfRX/

Thủ thuật rất dễ dàng là sử dụng một CSS calccông thức. Tất cả các trình duyệt hiện đại, IE9, nhiều trình duyệt di động nên hỗ trợ điều này.

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

bạn có thể thử điều này:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

Nếu bạn đang sử dụng Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

Tốt hơn nữa, hãy sử dụng những gì được tích hợp trong Bootstrap:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/