提问人：unstuck 提问时间：8/7/2022 更新时间：8/7/2022 访问量：74
将“订阅”按钮放在表单底部
Position subscribe button in the bottom of a form
问：
我对CSS几乎一无所知。
这是我的表格：
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
该按钮与输入字段不一致：
我尝试过一百万种方法，比如：
vertical-align：底部
和仓位：绝对边距 0;
等等等等。
没关系：按钮总是在中间。
谁能帮忙？
谢谢！
答：
1赞
Justin
8/7/2022
#1
您是否尝试过 margin-top 属性？它实质上是在您的订阅按钮顶部放置一个空格。
基本上在按钮的 css 块中，添加
边距顶部：10px;
请注意，此值是固定的，因此它可能不是最佳解决方案，但它是一个快速简便的解决方案。还要玩弄这个值，直到它是正确的位置。
评论
0赞
unstuck
8/7/2022
谢谢，我已经尝试.acym_module_form input[type=“button”]{ margin-top： 28px; } 并且它有效，尽管它似乎是硬编码的，并且可能会在手机上损坏
1赞
Ibrahim Yusuf
8/7/2022
#2
请改用
position: absolute;
bottom: 0px;并添加 bottom：0px;
2赞
Fukasaku
8/7/2022
#3
在提交的代码中，未正确使用 HTML 表格。
如果要使用表创建表单，则应将输入的标签声明为列标题，该列标题位于表的部分中，而不是在 中。这样，您的表格行将仅包含输入和提交按钮，并且默认情况下它们将具有相同的高度。theadtbody
th {
text-align:left;
}<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
评论