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

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

내게 다음과 같은 html 스니펫이 있다고 가정해 보겠습니다.

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

이것은 제 정확한 코드는 아니지만, 중요한 것은 고정 폭 컨테이너에 같은 라인에 라벨과 텍스트 입력이 있다는 것입니다.포장하지 않고 라벨의 크기도 모른 채 용기의 남은 폭을 채우도록 입력을 스타일화하려면 어떻게 해야 합니까?

자바스크립트나 테이블 레이아웃 해킹을 사용하지 않고 간편하고 깨끗한 솔루션이 있습니다.이것은 다음과 같은 답변과 유사합니다.다른 요소가 떠있는 상태에서 입력 텍스트 자동 너비 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: 입력 필드와 전체를 공유하는 여러 버튼이나 다른 요소에서도 작동합니다.여기 예가 있습니다.

모든 사람들이 레이아웃을 위해 테이블을 싫어하지만, 명시적인 테이블 태그를 사용하거나 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>

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>

플렉스박스로 해주세요.당신은 아이들을 일렬로 만들 컨테이너를 가지고 있습니다.첫째 아이는 필요에 따라 공간을 차지합니다.두 번째는 남은 공간을 모두 차지할 수 있도록 유연하게 구성됩니다.

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

아주 쉬운 방법은 a를 사용하는 것입니다.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>

여기에 제시된 답변은 좀 구식입니다.현대적인 플렉스박스를 사용하는 가장 쉬운 솔루션을 소개합니다.

.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}

<div style="width:300px;">
    <div class="input-container">
    <label for="MyInput">label text: </label>
    <input type="text" id="MyInput"/>
    </div>
    
    <div class="input-container">
    <label for="MyInput2">Long label text: </label>
    <input type="text" id="MyInput2" />
    </div>
    
</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>

부트스트랩에 내장된 기능을 사용하는 것이 더 좋습니다.

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

언급URL : https://stackoverflow.com/questions/773517/style-input-element-to-fill-remaining-width-of-its-container