SCSS를 사용하여 입력 및 두 개의 버튼 정렬하기

Question

두 개의 버튼이 있습니다. 실제로는 <a> 태그이고, 입력에 고정되며 입력과 크기가 같아야합니다. 이미지는 내가 성취하고자하는 것을 완벽하게 묘사합니다. 난 그냥 SASS와 CSS를 배우기 시작하고

참고. 나는이 있지만 운

NumberInput.js

<div 
className="NumberInput" 
data-key={dataKey}> 
    <div className="numberInputField"> 
     <input 
      data-key={dataKey} 
      type="text" 
      name="number" 
      value={getValue(datakey)} 
      onChange={onChange(datakey)}/> 
    </div> 
    <div className="buttonsField"> 
     <div className="row"> 
      <ValueChangeButton/> 
     </div> 
     <div className="row"> 
      <ValueChangeButton/> 
     </div> 
    </div> 
</div> 

NumberInput.scss

$inputMaxWidth: 450px; 
$maxHeight: 80px; 
$btnFieldMaxWidth: 150px; 

.NumberInput{ 
    max-width: $inputMaxWidth; 
    max-height: $maxHeight; 

    .numberInputField{ 
     display: inline-block; 
     text-align: center; 
     max-width: inherit; 
     max-height: inherit; 
    } 

    .buttonsField{ 
     display: inline-block; 
     max-width: $btnFieldMaxWidth; 
     max-height: $maxHeight; 
     .button{ 
      width: auto; 
      height: auto; 
     } 
    } 
} 

나는이 얻을 결과를 시도, 버튼, 각각의 행에 포함되어 있습니다 그러나 입력과 크기가 같지 않고 페이지 전체를 날고 있습니다. 또한 className을 내 input으로 변경하고 의 <div>을 "numberInputField"으로 설정하면 폭과 높이가 변경되지 않습니다.

Answer 1

인 flexbox이를 위해 완벽하다 :

body { 
 
    margin: 1em; 
 
} 
 

 
.NumberInput { 
 
    display: flex; 
 
    max-width:450px; 
 
    margin:auto; 
 
} 
 

 
.numberInputField { 
 
    flex: 3; /* say 3/4 of width */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
input { 
 
    padding: 1em 4em; 
 
    flex: 1; 
 
} 
 

 
.buttonsField { 
 
    flex: 1; /* say 1/4 of width */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    flex: 1; /* share width equally */ 
 
} 
 

 
a { 
 
    width: 100%; 
 
    display: block; 
 
    background: rebeccapurple; 
 
    text-align:center; 
 
    text-decoration: none; 
 
    font-size: 1.5em; 
 
    color: white; 
 
    border:1px solid grey; 
 
}

<div class="NumberInput"> 
 
    <div class="numberInputField"> 
 
    <input type="submit" /> 
 
    </div> 
 
    <div class="buttonsField"> 
 
    <div class="row"> 
 
     <a href="#2">&uarr;</a> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#3">&darr;</a> 
 
    </div> 
 
    </div> 
 
</div>