如何实现左右两侧标签文本对齐？（HTML/CSS表格方案）

直接用HTML表格实现左右两侧标签的对齐，表格单元格的天然对齐特性，能轻松解决你遇到的起始位置不一致问题，同时适配阿拉伯语的右排版需求。

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双语言标签模板</title>
    <style>
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .form-table td {
            padding: 8px 12px;
            vertical-align: middle;
        }
        /* 左侧中文标签列 */
        .label-left {
            text-align: left;
            width: 25%;
            font-weight: bold;
        }
        /* 左侧输入区域列 */
        .input-left {
            width: 25%;
        }
        /* 右侧阿拉伯语标签列 */
        .label-right {
            text-align: right;
            width: 25%;
            font-weight: bold;
            direction: rtl; /* 适配阿拉伯语从右到左排版 */
        }
        /* 右侧输入区域列 */
        .input-right {
            width: 25%;
            direction: rtl;
        }
        .form-input {
            width: 100%;
            padding: 6px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <table class="form-table">
        <tr>
            <td class="label-left">提交日期</td>
            <td class="input-left"><input type="date" class="form-input"></td>
            <td class="label-right">رقم الهاتف</td>
            <td class="input-right"><input type="text" class="form-input" placeholder="أدخل رقم الهاتف"></td>
        </tr>
        <tr>
            <td class="label-left">员工ID</td>
            <td class="input-left"><input type="text" class="form-input" placeholder="输入员工ID"></td>
            <td class="label-right">اسم الموظف</td>
            <td class="input-right"><input type="text" class="form-input" placeholder="أدخل اسم الموظف"></td>
        </tr>
        <!-- 更多行可按此结构添加 -->
    </table>
</body>
</html>

关键说明 #

• 表格分为4等宽列（各占25%），保证左右布局对称；
• 左侧中文标签列设置text-align: left，强制所有标签左对齐；
• 右侧阿拉伯语标签列设置direction: rtl+text-align: right，适配阿语从右到左的排版规则，让标签统一靠右对齐；
• 输入框设置width: 100%和box-sizing: border-box，确保在单元格内填满且不溢出；
• border-collapse: collapse消除表格默认边框，让布局更整洁（需要边框可自行添加border样式）。

这个方案彻底解决标签起始位置不一致的问题，表格布局天然保证每行的标签与输入框对齐，无需复杂的Flex属性调试。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz