要实现按钮和输入字段不愿意对齐到右上角,可以使用CSS样式来定位和调整元素的位置。以下是一个示例代码:
HTML代码:
CSS代码:
.container {
position: relative;
width: 200px;
height: 50px;
border: 1px solid #ccc;
}
input[type="text"] {
position: absolute;
top: 10px;
left: 10px;
width: 120px;
height: 30px;
}
button {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 30px;
}
在这个示例中,我们通过给包含输入字段和按钮的容器设置position: relative
来创建一个相对定位的容器。然后,通过position: absolute
将输入字段和按钮定位到容器内的指定位置。
对于输入字段,我们使用top
和left
属性将其定位到容器的左上角。可以根据需要调整top
和left
的值来微调位置。
对于按钮,我们使用top
和right
属性将其定位到容器的右上角。同样,你也可以根据需要调整top
和right
的值来微调位置。
这样,按钮和输入字段就不会对齐到右上角,而是分别定位到容器的左上角和右上角。