注册表单部分代码如下:

 <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-6">
<em style="color: red;">*</em>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<em style="color: red;">*</em>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
</div>

出现的问题是*与input框不在同一水平位置上,如下图示

解决方法:覆盖input标签的class=“form-control”,修改display为“inline”,原来的block会让div前后带上换行符,将width设置为90%(width原来为100%,需在引入bootstrap的css文件后引入自己写的css样式)

display的两个取值

在自己的css文件中修改如下

 .form-control {
display: inline;
width: 90%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

修改后的页面,*与input框在同一行,效果如下

最新文章

  1. &quot;Type Coercion failed&quot; Error in FlashBuilder 4.7
  2. DbExpressionBinding requires an input expression with a collection ResultType. 参数名: input
  3. 从3D Touch 看 原生快速开发
  4. infer.net 入门2 用一个侦探故事来讲解,通俗易懂
  5. K-V-O 键值观察机制
  6. Android开发-API指南-设备兼容性
  7. Winform下实现图片切换特效的方法
  8. CSS3 变形小结
  9. ubuntu12中设置PATH环境变量的几种方法(三种办法)
  10. iCloud同步测试
  11. php 禁止 URL 直接访问 php文件
  12. 使用oracle数据库,多用户同时对一个表进行增加,删除,修改,查看等操作,会不会有影响?
  13. iOS开发——An App ID with identifier &quot;*****&quot; is not avaliable
  14. Java日志工具之Log4J
  15. 【转】python入门指引
  16. Luogu4137:Rmq Problem/mex
  17. Hadoop的Archive归档命令使用指南
  18. Java连接MySQL数据库详细教程(附网盘下载地址)
  19. DevExpress GridControl小结
  20. XiaoKL学Python(E)Generator Expressions

热门文章

  1. python 集合比较(交集、并集,差集)集合方法大全
  2. Django 笔记(来源于讲师)以及常见问题的解决
  3. vim复制粘贴常用命令
  4. c++重载前置++和--
  5. upupw phpmyadmin写shell
  6. js获取checkbox值的方法
  7. 【Unity笔记】一些Mecanim动画系统、状态机的参数细节
  8. [状态机]嵌入式设计模式:有限状态自动机的C语言实现
  9. TP5 display()
  10. zoj3228 Searching the String AC自动机查询目标串中模式串出现次数(分可覆盖,不可覆盖两种情况)