html 요소를 나란히 쌓기

Question

총 4 개의 HTML 요소를 가로 100 %로 나란히 놓고 싶습니다.

<input type="number" name="height" placeholder="weight"> 
<span>kg</span> 
<input type="number" name="weight" placeholder="height"> 
<span>cm</span> 

하지만 스택 오버플로가 작동하지 않는 경우가 많습니다. 나는

Answer 1

input 및 span 요소 "인라인"요소이다 ... 이런 식으로 뭔가를 얻을. 너비는 내용만큼 넓습니다 (또는 input의 경우 너비가 넓다고 말한 경우). 당신은 이미 그것들을 나란히 배치하고 있습니다, 그러나 그것들을 합계로 사용 가능한 너비의 100 %를 차지할 수 있도록 width을 설정할 수있는 "블록"요소처럼 취급해야합니다. 그 페이지.

당신은 웹 페이지에서 기본적으로 어떻게 레이아웃 작품을 이해하기 시작하는 block 대에 inline 요소와 CSS Box Model을 볼 필요가있다. 여기

는 input 필드가 빈 공간을 채우기 위해 스트레칭됩니다 예입니다 :

input { 
 
    display:inline-block;  /* Allow the inline element to be sized as a block element */ 
 
    width:calc(50% - 2.5em); /* Each will be 50% of the width of the parent - roughly 2.5 characters */ 
 
}

<input type="number" name="height" placeholder="weight"> 
 
<span>kg</span> 
 
<input type="number" name="weight" placeholder="height"> 
 
<span>cm</span>

또는, 당신은 정상으로 폭을 원하지만, 모든 4 개 요소를 원하는 경우 사용 가능한 너비에 맞춰 지도록하려면 부모 요소에 자식 요소를 가로로 정렬하는 방법을 알려야합니다. text-align :

.center { 
 
    text-align:center; 
 
}

<div class="center"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>

Answer 2

인 flexbox는

당신이 가지고있는, 부모 컨테이너를 필요로 등, 이제까지 포장 결코 나머지 폭, 포장 또는 점유하지 (두 축) 정렬 쉽게 변화, 폭, 수 있습니다 display: flex. 그것은 플렉스 컨테이너입니다. 이제 모든 어린이는 플렉스 상품입니다.

CSS 속임수는 대단한 Cheatsheet for Flexbox입니다. 그것은 (표지 요소되어야 스팬에 의해 점유되지 않은 공백

• 입력되지 점유하며 :

  여기 2 예?) - Codepen는

• 각 요소의 폭의 약 25 %를 차지하고, 음의 각 입력 및 라벨 사이에 필요한 마진 - Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    padding: 2rem 1rem; 
 
    background-color: tomato; 
 
} 
 

 
.container input { 
 
    flex-grow: 1; 
 
} 
 

 
.container span { 
 
    margin: 0 4rem 0 0.5rem; 
 
} 
 

 
.container span:last-of-type { 
 
    margin-right: 0; 
 
}

<div class="container"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>

html { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    padding: 2rem 1rem; 
 
    background-color: beige; 
 
} 
 

 
.container input, 
 
.container span { 
 
    width: calc(25% - 0.5rem); /* half of the margin set below */ 
 
} 
 

 
.container span { 
 
    margin-left: 1rem; 
 
}

<div class="container"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>