javascript - 将 Div 的内容放在顶部

Question

我想创建一个包含整数值的输入。如果单击 caret-up 按钮，输入值将增加 1，如果单击 cater-down 按钮，输入值将减少 1。

我的问题是 down-caret 的样式是错误的。我想将 down-caret 放在 blue 矩形的顶部。

目前，down-caret 位于 div 的底部。下面是当前输出的图像。

我尝试了几种方法，例如 flex、绝对位置等。但这些是红色 div 和蓝色 div 的重叠区域。

// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
  input.value = parseInt(input.value) + parseInt(value);
}

/* style the qty div to display both input and buttons div in the same line*/
.qty {
  width: 250px;
  height: 50px;
}

/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
  width: 230px;
  float: left;
  height: 100%;
}

/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
 width: 220px;
 height: 100%;
}

/* style the buttons div to display input and caret in the same line*/
#buttons {
  width: 20px;
  height: 100%;
  float: right;
  display: block;
}

/* style the action button to fit the height of the div*/
.action_btn {
  height: 25px;
}

#plus_remind {
    font: 33px/1 Arial,sans-serif;
    border: 1px solid red;
    cursor: pointer;
}

#minus_remind {   
    font: 33px/1 Arial,sans-serif;
    border: 1px solid blue;
    cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
   <div id="remind_number_wrapper">
     <input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
   </div>
   <div id="buttons">
     <!-- add className 'action_btn' to easier to style button in the same place-->
     <div class="action_btn" id="plus_remind" onclick="addValue(1)">
        <!-- change the fas to fa for the right class of font-awesome -->
        <i class="fa fa-caret-up"></i>
     </div>
     <div class="action_btn" id="minus_remind" onclick="addValue(-1)">
        <i class="fa fa-caret-down"></i>
     </div>
   </div>
</div>

Answer 1

您的描述有点不清楚，如果我理解正确，请查看下面的示例，看看它是否是您想要的。

* {
    box-sizing: border-box;
}
.qty {
    position: relative;
}
.new {
    position: absolute;
    right: 0;
    top: 0;
}
#plus_remind, #minus_remind {
    margin: 0;
    height: 24px;
    width: 22px;
    font: 33px/1 Arial,sans-serif;
    cursor: pointer;
}
#plus_remind {
    border: 1px solid blue;
}
#minus_remind {   
    border: 1px solid red;
}
input {
    height: 48px;
    font-size: 1.5rem;
    margin: 0px;
    padding: 0px;
    line-height: 1.5rem;
    width: 100%;
}

<div class="qty">
   <input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
   <div class="new">
     <div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
        <i class="fas fa-caret-up"></i>
     </div>
     <div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
        <i class="fas fa-caret-down"></i>
     </div>
  </div>