将 Div 的内容放在顶部

Question

I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.

My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.

Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.

I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue 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

For number, there is another solution that uses the input with type number

 <input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">

Another way, I remove usage of font-awesome and create triangle by pure CSS

 // 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); }

 .qty { width: 200px; } #remind_number_wrapper { float: left; } i { display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; cursor: pointer; }.up { border-bottom: 5px solid black; margin-bottom: 0px; }.down { border-top: 5px solid black; margin-top: 0px; }

 <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)"> <i class="up"></i> </div> <div class="action_btn" id="minus_remind" onclick="addValue(-1)"> <i class="down"></i> </div> </div> </div>

Answer 2

Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.

 * { 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>