양식의 레이블/입력 고정 유체 레이아웃

Question

이 original post에 제시된 문제를 해결하려고합니다. 기본적으로 레이블과 관련 입력이 같은 줄에있는 양식을 만들고 싶습니다. 레이블의 너비는 고정되어 있으며 나머지 입력 너비에 맞게 입력이 확장됩니다. 각 라벨 + 입력 쌍에는 자체 회선이 있습니다.

<form> 
    <label for="name">Name:</label> 
    <input id="name"/> 

    <label for="email">Email:</label> 
    <input id="email"/> 
</form> 

나는 this post에서 제안 된 해결책을 읽었지만 많이 설득하지는 않습니다. formLine 클래스를 도입했기 때문에 매우 의미가 없다고 생각합니다. 나는 매우 까다로워할지 모르지만, HTML 코드는 시맨틱 스터 만 (이 경우에는 label 및 input) 포함해야하며 레이아웃은 스타일 시트에만 남겨 두어야한다고 생각합니다.

아무도 의미가 아닌 코드를 추가하지 않고 위의 스 니펫을 스타일링하는 데 실마리가 있습니까? 나는 열쇠가 input가 나머지 입력란을 차지한다고 말하고, 각 입력 후에 <br/>과 같은 것을 사용하지 말아야한다고 생각한다.

당신은 CSS를 calc(); 기능을 사용하여 예를 마크 업을 변경하지 않고이 동작을 얻을 수 있습니다

Answer 1

는 :

DEMO

label{ 
    display:inline-block; 
    width:95px; 
} 
input{ 
    box-sizing:border-box; 
    width:calc(100% - 100px); 
}