HTML/CSS - 按钮在另一个元素下排列

Question

这就是我现在的表格- https://imgur.com/a/nFx2lyA

有没有办法将按钮“推”到右边？我希望我的“-”按钮位于下拉列表中的向下箭头下方。

这是我想要的示例(它使用文本框，但应该是下拉菜单。显示“对齐方式不正确”的按钮是我希望“-”按钮所在的位置)。 Codepen

HTML代码:

.button6 {
  right: 200px;
  width: 30px;
  padding: 8px 10px;
  text-align: right;
  font-size: 60%;
  margin-left: 15px;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  white-space: pre;
}

.btns {
  text-align: right;
}

.input,
.select {
  margin-left: 10px;
  width: 100%;
  margin-bottom: 5px;
}

<label for="services1">Service 1:</label> </td>
<td width="50%">
  <select name="services1" id="services1" v-model="services1">
  </select>
</td>
</tr>
</table>
<div class="btns">


  <button type="button" class="button6" id="add_service">+</button>
  <button type="button" class="button6" id="delete_row">-</button>

</div>

Answer 1

尝试 float 属性，连同 margin: 0 on body

 
body {
  margin: 0;
}
.button6 {

right: 200px;   
width:30px;
padding: 8px 10px;
text-align: right;
font-size: 60%;
margin-left : 15px;
border-radius: 5px;
margin-bottom:5px;
margin-top:5px;
white-space: pre; 

}
.btns {
  text-align: right;
}
.input,.select {
  margin-left: 10px;
  width: 100%;
  margin-bottom:5px;
}

<div style="float:right;">
  <label for="services1">Service 1:</label>
  <select name="services1" id="services1" v-model="services1">
</div>
                    </select>
<div class="btns">
<button type="button" class="button6" id="add_service">+</button> 
<button type="button" class="button6" id="delete_row">-</button>
</div>