남아있는 공간을 채우기위한 CSS 스트레치 텍스트 상자

Question

나는 라벨과 텍스트 상자가있는 div가 있으며 단순히 페이지의 나머지 공간을 채우기 위해 텍스트 상자를 늘려야합니다. 100 % 너비에는 여백이나 여백 값이 포함되지 않으므로 텍스트 상자와 div에 추가했습니다. 유사한 주제를 많이 검색했지만 텍스트 상자는 항상 라벨 아래의 새 줄에 나타납니다. 내가 뭘 놓치고 있니? 테스트 용으로 CSS를 인라인으로 배치하고 있습니다.

<div style="padding-right:10px;"> 
    <asp:Label ID="Label1" runat="server" Text="Label" style="float:left; width:150px; display:inline-block"></asp:Label> 
    <asp:TextBox ID="TextBox1" runat="server" style="display:inline-block; width:100%; padding-right:0"></asp:TextBox> 
</div> 

Answer 1

당신은 알려진 폭 레이블 calc() + box-sizing: border-box;를 사용할 수 있습니다. 아주 쉽게

또는

.container label, 
 
.container input[type="text"] { 
 
    float: left; 
 
} 
 
.container label { 
 
    width: 150px; 
 
} 
 
.container input[type="text"] { 
 
    width: calc(100% - 150px); 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <label>Label Example</label> 
 
    <input type="text"> 
 
</div>

, flexbox를 사용, 동적 폭 작동합니다.

당신은 기존 브라우저를 지원 CSS 테이블을 사용하여 시도해야하는 경우

.container { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
.container input[type="text"] { 
 
    flex: 1; /*take all the available space*/ 
 
}

<div class="container"> 
 
    <label>Label Example</label> 
 
    <input type="text"> 
 
</div>

. 참고, 작동하도록 입력 상자 주변에 span 태그를 추가했습니다.

.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.container label, 
 
.container span { 
 
    display: table-cell; 
 
} 
 
.container label { 
 
    white-space: nowrap; 
 
} 
 
.container span { 
 
    width: 100%; 
 
} 
 
.container input[type="text"] { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <label>Label Example</label> 
 
    <span><input type="text"></span> 
 
</div>