HTML/CSS - 按钮在另一个元素下排列
发布于2023-12-26 22:16 阅读(874) 评论(0) 点赞(29) 收藏(1)
这就是我现在的表单 - https://i.stack.imgur.com/NSukD.jpg
有没有办法将按钮“推”到右侧？我希望我的“-”按钮位于下拉列表中的向下箭头下方。
这是我想要的示例（它使用一个文本框，但应该是一个下拉菜单。显示“对齐不好”的按钮是我想要“-”按钮所在的位置）。代码笔
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>解决方案
尝试 float 属性，以及 body 上的 margin: 0
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>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/533303/60e82f4f329aeaf8ee3d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力