ASP.NET MVC中用HTML/CSS实现员工信息同行显示并添加边框

要实现四项员工信息横向排列并添加边框，你可以按照以下方式修改HTML和CSS：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 自定义CSS -->
    <style>
    .form-header {
        text-align: center;
        width: 30%;
        margin: 0 auto;
        background-color: gray;
        border-radius: 10px 10px 0 0;
        padding: 20px;
    }

    .form-header h2 {
        color: white;
        margin: 0;
    }

    .form-container {
        background-color: #eee;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .form-section {
        margin-bottom: 10px;
        width:400px;
    }

    input[type="text"] {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    .fill-by-employee {
        text-align: right;
        font-style: italic;
        color: #888;
    }
    h1 {
        text-align: center;
    }

    form {
        margin-top: 20px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 核心修改：员工信息区域样式 */
    .employee-info {
        display: flex;
        justify-content: space-around;
        border: 1px solid #333;
        padding: 15px;
        gap: 20px;
    }

    .info-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .info-item label {
        font-weight: bold;
        margin-bottom: 5px;
        text-align: center;
    }

    .info-value {
        border-bottom: 1px solid #333;
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }

    input[type="text"],
    textarea,
    input[type="date"] {
        width: 100%;
        padding: 5px;
    }

    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 20px;
    }

    input[type="submit"]:hover {
        background-color: #45a049;
    }
    </style>
</head>
<body>
   <div class="form-header"> 
        <h2> نموذج تسجيل استقاله <br/> Resignation Submission Form</h2> 
    </div>
    <div class="form-container">
        <div class="form-section">
            <label for="emp-input">Filled By Employee:</label>
        </div>
        <div class="form-section">
            <p class="fill-by-employee">يتم ملئها من الموظف</p>
        </div>
    </div>
    <form>
        <!-- 修改：用info-item包装每个信息项 -->
        <div class="employee-info">
            <div class="info-item">
                <label for="emp-id">Emp. ID:</label>
                <div class="info-value">-----</div>
            </div>
            <div class="info-item">
                <label for="emp-arabic-id">رقم الموظف:</label>
                <div class="info-value">-----</div>
            </div>
            <div class="info-item">
                <label for="emp-name">Emp Name:</label>
                <div class="info-value">-----</div>
            </div>
            <div class="info-item">
                <label for="emp-arabic-name">اسم الموظف:</label>
                <div class="info-value">-----</div>
            </div>
        </div>
    </form>
</body>
</html>

关键修改说明 #

1. 员工信息区域布局：给.employee-info添加display: flex和justify-content: space-around，让内部四个信息项横向均匀排列，同时加上border实现边框效果，padding和gap控制内边距和项间距。
2. 单个信息项容器：用.info-item包装每个标签和值，设置flex:1让它们均分宽度，flex-direction: column保持标签在上、值在下的垂直布局。
3. 修复无效属性：修改了原代码中重复的for属性值，确保每个label的for对应唯一的元素ID（即使这里用div展示值，也保持ID唯一性）。
4. 值区域样式：用.info-value替代原有的label展示值，添加下划线模拟输入框效果，保持样式统一。

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