SCSSを使用して入力と2つのボタンを整列させる

Question

実際には<a>タグの2つのボタンが必要です。自分の入力に固定し、入力と同じサイズにします。イメージは私が達成したいことを完全に記述しています。私はちょうど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

フレキシボックスは、このために完全である：

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>