如何将表单输入框与提交按钮对齐到同一行？

嘿，我太懂这种明明觉得是个小细节却卡半天的感觉了！针对你在WordPress插件里遇到的提交按钮总跑到输入框下方、没法同右侧对齐的问题，给你几个实用的自定义CSS方案，应该能快速解决：

Flex是现在处理这类布局最省心的方式，直接给表单容器设置flex属性，就能轻松让输入框和按钮同排对齐：

/* 给表单容器开启flex布局 */
.tnp-subscription form {
    display: flex;
    gap: 10px; /* 可选：给输入框和按钮之间加个小间距，看着更舒服 */
    align-items: center; /* 让元素垂直居中，避免高低不齐 */
}

/* 让输入框占满剩余空间，按钮只占自身宽度 */
.tnp-subscription input[type="email"] {
    flex: 1;
    box-sizing: border-box; /* 确保输入框的内边距和边框不会撑宽容器 */
}

/* 防止按钮文字换行，保证按钮宽度稳定 */
.tnp-subscription input[type="submit"] {
    white-space: nowrap;
}

如果担心某些极旧浏览器不支持Flex，也可以用inline-block来调整：

/* 把输入框和按钮都改成行内块元素 */
.tnp-subscription input[type="email"],
.tnp-subscription input[type="submit"] {
    display: inline-block;
    vertical-align: middle; /* 垂直居中对齐，避免错位 */
    box-sizing: border-box;
}

/* 手动计算输入框宽度，给按钮留位置 */
.tnp-subscription input[type="email"] {
    width: calc(100% - 130px); /* 这里130px是按钮的大致宽度，你可以根据实际按钮大小调整 */
}

如果上面的代码没生效，可能是插件自带的CSS优先级比你的自定义CSS高，这种情况可以暂时用!important强制覆盖（尽量少用，但应急没问题）：

.tnp-subscription form {
    display: flex !important;
    gap: 10px !important;
}

内容的提问来源于stack exchange，提问作者Josh Martin