您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在CSS中对齐表单元素

在CSS中对齐表单元素

这是一种有效的方法

form {
    width: 80%;
    margin: 0 auto;
}

label, input {
    /* In order to define widths */
    display: inline-block;
}

label {
    width: 30%;
    /* Positions the label text beside the input */
    text-align: right;
}

label + input {
    width: 30%;
    /* Large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0 30% 0 4%;
}

/* Only the submit button is matched by this selector,
   but to be sure you Could use an id or class for that button */
input + input {
    float: right;
}
?

调整尺寸和边距以适合您的用例和美观。

CSS 2022/1/1 18:22:18 有295人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶