要构建一个HTML/CSS内联表单,可以使用以下代码示例:
HTML代码:
CSS代码:
.inline-form label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
.inline-form input[type="text"],
.inline-form input[type="email"] {
display: inline-block;
width: 200px;
padding: 5px;
margin-bottom: 10px;
}
.inline-form button {
display: inline-block;
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
}
在上面的代码中,我们使用了一个元素来包装表单内容。通过为
元素添加
class
属性并设置为inline-form
,我们可以在CSS中使用该类选择器来定义内联表单的样式。
标签和输入框
都被设置为
display: inline-block;
,这样它们就会水平排列。我们还使用了一些额外的样式来对齐和调整输入框和按钮的样式。
最后,我们使用了一个元素作为提交按钮,并添加了一些样式来使其看起来更好。
此代码示例将创建一个内联表单,其中包含名称和邮箱字段以及一个提交按钮。您可以根据需要自定义表单字段的数量和样式。