flex布局(五)

<div class="form-item">
    <label>用户名：</label>
    <input type="text" placeholder="请输入">
</div>
<div class="form-item">
    <label>密码：</label>
    <input type="password" placeholder="请输入">
</div>
<div class="form-item">
    <label>这是一段很长的标签名称：</label>
    <input type="text" placeholder="请确认">
</div>

<style>
    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .form-item label {
        width: 120px;
        /* 固定标签宽度 */
        flex-shrink: 0;
        /* 防止空间不足时标签被挤压变形 */
        text-align: right;
        margin-right: 10px;
    }

    .form-item input {
        flex: 1;
        /* Input 填满剩余空间 */
        padding: 8px;
        border: 1px solid #ccc;
    }
</style>