解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
注册表单部分代码如下:
1 <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;"> 2 <div class="form-group"> 3 <label for="username" class="col-sm-2 control-label">用户名</label> 4 5 <div class="col-sm-6"> 6 <em style="color: red;">*</em> 7 <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"> 8 </div> 9 </div> 10 <div class="form-group"> 11 <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 12 <div class="col-sm-6"> 13 <em style="color: red;">*</em> 14 <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"> 15 </div> 16 </div>
出现的问题是*与input框不在同一水平位置上,如下图示
解决方法:覆盖input标签的class=“form-control”,修改display为“inline”,原来的block会让div前后带上换行符,将width设置为90%(width原来为100%,需在引入bootstrap的css文件后引入自己写的css样式)
display的两个取值
在自己的css文件中修改如下
1 .form-control { 2 display: inline; 3 width: 90%; 4 height: 34px; 5 padding: 6px 12px; 6 font-size: 14px; 7 line-height: 1.42857143; 8 color: #555; 9 background-color: #fff; 10 background-image: none; 11 border: 1px solid #ccc; 12 border-radius: 4px; 13 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 14 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 15 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 16 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 17 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 18 }
修改后的页面,*与input框在同一行,效果如下
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现