注冊表單部分代碼如下：
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框在同一行，效果如下
