使用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的{​​{1}}，并将其input的{​​{1}}设置为className，则不会更改其宽度和高度

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>