我需要在输入中放置按钮
我尝试为表单设置相对位置,为按钮设置绝对位置,并更改了左/上。但是在该字段中,我必须将值设置为较大的值才能获得良好的效果(我在输入中将“位置”按钮设置为左600px,这使我感到困惑)
我想要这样:
有没有一种方法可以用于flex显示?
form {
padding: 4rem 0;
position: relative;
}
input[type=text] {
background: #fff;
width: 500px;
padding: 0.7rem;
border: 1px solid #cbcbce;
border-radius: 50px;
color: #3a3d4b;
}
button {
position: absolute;
background: #6fc754;
padding: 0.6rem 1rem;
border: none;
color: #fff;
border-radius: 25px;
left: 600px;
top:5px;
}
<form>
<input type="text" placeholder="Enter text">
<button>Send Invite</button>
</form>
答案 0 :(得分:1)
尝试以下代码。没有错误:
form {
padding: 4rem 0;
position: relative;
display: table;
}
input[type=text] {
box-sizing: border-box;
background: #fff;
width: 500px;
padding: 0.7rem 115px 0.7rem 0.7rem;
border: 1px solid #cbcbce;
border-radius: 50px;
color: #3a3d4b;
}
button {
position: absolute;
background: #6fc754;
padding: 0.6rem 1rem;
border: none;
color: #fff;
border-radius: 25px;
right: 4px;
transform: translateY(2.5px);
}
<form>
<input type="text" placeholder="Enter text">
<button>Send Invite</button>
</form>
答案 1 :(得分:0)
要使其正常工作,您需要将它们包装在具有div
css属性的position: relative;
中。
form {
padding: 4rem 0;
position: relative;
}
.relative {
position: relative;
}
input[type=text] {
background: #fff;
width: 500px;
padding: 0.7rem;
border: 1px solid #cbcbce;
border-radius: 50px;
color: #3a3d4b;
}
button {
position: absolute;
background: #6fc754;
padding: 0.7rem 1rem;
border: none;
color: #fff;
border-radius: 25px;
right: 141px;
top:1px;
}
<form>
<div class="relative">
<input type="text" placeholder="Enter text">
<button>Send Invite</button>
</div>
</form>
答案 2 :(得分:0)
如果您无法更改HTML结构,那么您将宽度固定为500px,因此,当然,您必须进行一些讨厌的计算才能定位它。
如果您使用百分比会更容易
最重要的是,还有填充(与按钮的输入不同)
因此,首先,按钮的left
应该是calc(500px + 1.4rem);
,其中500px
是输入的宽度,1.4rem
来自{{的left/right padding
} 0.7rem
具有的1}}。现在,按钮位于输入之后。现在,将其宽度的100%移到左侧。
第二,由于input
的{{1}}填充bottom: 4.2rem
,因此底部应为form
,然后由于输入的填充为{{1} }和按钮的填充为top/bottom
,因此4rem
较小(在Y轴上)。
0.2rem
0.7rem