@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device
-width" />
<title>资料
修改</title>
<link href="~/Scripts/
layui/css/
layui.css" rel="stylesheet" />
<script src="~/Scripts/
layui/
layui.js"></script>
<script src="~/Scripts/jquery
-3.4.1.js"></script>
<style>
body {
display: grid;
place
-items: center; /* 核心属性 */
height: 100vh;
margin: 0;
}
form {
width: 600px;
padding: 20px;
box
-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<form class="
layui-form">
<!
-- 用户编号
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">用户账号</label>
<div class="
layui-input-block">
<
input type="text" name="UserCode" lay
-verify="required" placeholder="请输入用户账号" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 用户名称
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">用户名</label>
<div class="
layui-input-block">
<
input type="text" name="UserName" lay
-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 性别
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">性别</label>
<div class="
layui-input-block">
<
input type="radio" name="Sex" value="true" title="男" checked>
<
input type="radio" name="Sex" value="false" title="女">
</div>
</div>
<!
-- 出生日期
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">出生日期</label>
<div class="
layui-input-inline layui-input-wrap">
<div class="
layui-input-prefix">
<i class="
layui-icon
layui-icon
-date"></i>
</div>
<
input type="text" name="BirthDay" id="birthDate" lay
-verify="date" placeholder="yyyy
-MM
-dd" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 籍贯
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">籍贯</label>
<div class="
layui-input-block">
<
input type="text" name="NativePlace" placeholder="请输入籍贯" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 地址
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">地址</label>
<div class="
layui-input-block">
<
input type="text" name="Address" placeholder="请输入详细地址" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 密码
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">密码</label>
<div class="
layui-input-inline layui-input-wrap">
<
input type="password" name="Password" lay
-verify="required|pass" placeholder="请输入密码" autocomplete="off" lay
-affix="eye" class="
layui-input">
</div>
<div class="
layui-form
-mid
layui-text
-em">6
-12位字符</div>
</div>
<!
-- 邮箱
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">邮箱</label>
<div class="
layui-input-block">
<
input type="text" name="Email" lay
-verify="email" placeholder="请输入邮箱" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 电话
-->
<div class="
layui-form
-item">
<label class="
layui-form
-label">电话</label>
<div class="
layui-input-block">
<
input type="tel" name="Tel" lay
-verify="required|phone" autocomplete="off" placeholder="请输入手机号" class="
layui-input">
</div>
</div>
<!
-- 状态
-->
<!
-- 职位ID
-->
<!
--<div class="
layui-form
-item">
<label class="
layui-form
-label">职位</label>
<div class="
layui-input-block">
<select name="PositionID" lay
-verify="required" lay
-search>
<option value="">请选择职位</option>
<option value="1">管理员</option>
<option value="2">普通员工</option>
<option value="3">超级管理员</option>
</select>
</div>
</div>
-->
<!
-- 组织机构ID
-->
<!
--<div class="
layui-form
-item">
<label class="
layui-form
-label">组织机构</label>
<div class="
layui-input-block">
<select name="OrganizationID" lay
-verify="required" lay
-search>
<option value="">请选择组织机构</option>
<option value="1">总部</option>
<option value="2">技术部</option>
<option value="3">市场部</option>
</select>
</div>
</div>
-->
<div class="
layui-form
-item">
<div class="
layui-input-block">
<button type="submit" class="
layui-btn" lay
-submit lay
-filter="formSubmit">立即提交</button>
<button type="submit" class="
layui-btn" lay
-submit lay
-filter="formSubmit2">返回登录</button>
<button type="reset" class="
layui-btn
layui-btn
-primary">重置</button>
</div>
</div>
</form>
</body>
</html>根据这个代码给我一份合理的
修改模板heml的
当使用layui-input-inline实现表单元素水平排版时，直接修改宽度无效，原因在于layui内置样式的优先级较高。解决方法是在外部样式表中增加针对.layui-form-item.layui-input-inline的选择器，设置宽度为220px，以覆盖默认样式。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
