程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于2023-12-26 22:16     阅读(864)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

29 0
收藏该文
已收藏

评论内容:(最多支持255个字符)