应优先用flex或grid布局：每组label+input需包裹在容器中，设display:flex并加align-items:center；label用flex:0 0 120px固定宽，input用flex:1自适应；避免table、float、inline-block等语义错误或响应式差的方案。
直接用 <table> 能快速对齐，但语义错误、响应式差；现代开发应优先用 <code>display: flex 或 display: grid，它们才是可控、可维护的对齐方案。
label 和 input 怎么对齐才不偏移
常见错误是只靠视觉摆放，比如把 <label></label> 和 <input> 并列写在一行里，结果在 Chrome/Firefox 中 <label></label> 默认 baseline 对齐，看起来比输入框高一截。
- 必须用容器包裹每组，例如
<div class="form-row"> <label>姓名</label><input type="text"> </div> - 给容器设
display: flex，<label></label>设flex: 0 0 120px（固定宽度），<input>不设宽或加flex: 1 - 加
align-items: center消除垂直错位，比vertical-align: middle更可靠 - 避免用
float或inline-block—— 行高、字体、padding 微小差异就会导致对不齐
怎么让按钮右对齐又不破坏文档流
text-align: right 只对行内内容有效，对块级按钮无效；float: right 会脱离流、需清除，已过时。
- 父容器设
display: flex，再加justify-content: flex-end，按钮自动贴右 - 如果按钮是唯一子元素，更简单：给按钮本身加
margin-left: auto - 不要用
position: absolute+right: 0—— 容器高度塌陷、响应式下易重叠 - Grid 方案也行：
display: grid; justify-content: end，但 Flex 更轻量、兼容性更好（IE11+）
表格布局（<table>）什么时候能用
<p>它确实“看起来”对齐最稳，但仅限于三类场景：内网后台系统、临时演示页、纯数据报表（无交互）。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>移动端几乎必然出问题：<code><table> 宽度超屏、iOS Safari 对 <code>width: 100% 支持不稳定
<div style="overflow-x: auto"> 防止内容被切
<li><code><td> 里别嵌 <code><p></p> 或额外 <div>，会破坏默认垂直居中行为
<li>语义上，表单不是表格数据，用 <code><table> 违反 HTML5 规范，影响可访问性和 SEO
<p>真正难的不是“让两个元素看起来在一条线上”，而是让它们在缩放 125%、换字体、开高对比度模式、切换暗色主题时依然对齐 —— 这点只有 Flex 和 Grid 能稳定做到，其他都是权宜之计。</p>
</table>
