컨테이너의 나머지 너비를 채우는 스타일 입력 요소

다음과 같은 HTML 스 니펫이 있다고 가정 해 봅시다.

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

이것은 내 정확한 코드는 아니지만 중요한 것은 고정 너비 컨테이너의 동일한 줄에 레이블과 텍스트 입력이 있다는 것입니다. 줄 바꿈없이 레이블의 크기를 알지 않고 컨테이너의 나머지 너비를 채우도록 입력 스타일을 어떻게 지정할 수 있습니까?

모든 사람이 레이아웃을 위해 테이블을 싫어하는 것처럼 명시적인 테이블 태그를 사용하거나 display : table-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>

다음은 JavaScript 또는 테이블 레이아웃 해킹을 사용하지 않는 간단하고 깨끗한 솔루션입니다. 이 답변과 비슷합니다. 입력 텍스트 자동 너비가 다른 요소를 부동으로 100 % 채 웁니다.

입력 필드를 범위 인로 감싸는 것이 중요합니다 display:block. 다음은 버튼이 먼저오고 입력 필드가 두 번째로되어야한다는 것입니다.

그런 다음 버튼을 오른쪽으로 띄우면 입력 필드가 나머지 공간을 채 웁니다.

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>

간단한 바이올린 : http://jsfiddle.net/v7YTT/90/

업데이트 1 : 귀하의 웹 사이트가 최신 브라우저만을 대상으로하는 경우 유연한 상자를 사용하는 것이 좋습니다 . 여기 에서 현재 지원을 확인할 수 있습니다 .

업데이트 2 : 입력 필드와 전체를 공유하는 여러 버튼 또는 기타 요소에서도 작동합니다. 여기 예가 있습니다.

Flexbox를 사용하는 것이 좋습니다.

그래도 적절한 공급 업체 접두사를 추가하십시오!

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>

이를 위해 flexbox를 사용하십시오. 자식을 한 줄로 묶을 컨테이너가 있습니다. 첫 아이는 필요에 따라 공간을 차지합니다. 두 번째는 나머지 공간을 모두 차지합니다.

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

이를 달성하는 가장 쉬운 방법은 다음과 같습니다.

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>

다음과 같이 보입니다 : http://jsfiddle.net/JwfRX/

매우 쉬운 트릭은 CSS calc수식을 사용하는 것 입니다. 모든 최신 브라우저, IE9 및 광범위한 모바일 브라우저가이를 지원해야합니다.

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

당신은 이것을 시도 할 수 있습니다 :

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>

부트 스트랩 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>

더 나은 방법은 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/