可以通过将按钮的位置与文本框的位置进行调整来实现对齐。例如,可以使用CSS样式来进行对齐,代码示例如下:
HTML代码:
CSS代码:
.container {
display: flex;
align-items: center;
}
.container input {
margin-right: 10px;
}
.container button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
在上述代码中,display: flex
使得容器中的元素在水平方向排列,并且让它们从容器的垂直中心对齐。margin-right: 10px
为文本框增加右侧的留白,使得文本框与按钮之间留出一定的间距。padding: 10px 20px
为按钮添加内边距,增加按钮的大小和美观程度。
通过上述CSS样式的应用,可以实现文本框和按钮的对齐效果。
上一篇:按钮与图片不在同一行