需要帮助的UI文本对齐
问题描述：
我有jsp页面中引用css样式表的html代码。这种情况是由UI开发人员开发的，我试图通过添加密码准则消息来显示新密码和确认新密码字段旁边的功能。但是，指南并没有显示在我想要的地方。我是UI方面的新手。你能帮我吗？需要帮助的UI文本对齐
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
</div>
<a title="*Password must start with an alphabetic character
*Password must be at least 7 character(s) long
*Password must contain at least 1 special character(s)
*Password must contain at least 1 uppercase letter(s)
*Password must not match or contain First Name
*Password must not match or contain Last Name
*Password must not match or contain User ID" class="xfe" onclick="return false;" href="#"><i class="ico ico-dim14x14 ico-info top-margin-10 hidden-xs"> </i></a>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
</div>
<hr/>
<div class="form-group">
<table align="center">
<tr>
<td>*Password must start with an alphabetic character</td>
</tr>
<tr>
<td>*Password must be at least 7 character(s) long</td>
</tr>
<tr>
<td>*Password must contain at least 1 special character(s)</td>
</tr>
<tr>
<td>*Password must contain at least 1 uppercase letter(s)</td>
</tr>
<tr>
<td>*Password must not match or contain First Name</td>
</tr>
<tr>
<td>*Password must not match or contain Last Name</td>
</tr>
<tr>
<td>*Password must not match or contain User ID</td>
</tr>
</table>
<div class="col-sm-12 text-align-right form-footer">
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
</div>
</form>
<!--login form ends here-->
</div>
</div>
</div>
</div><!-- Main Content Ends -->
答
我希望这是你在找什么！ （通过网格系统并排放置）。
而且我会建议你减少没有。行，在密码的说明。 （尽量把它做成2至4行）
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
<br>
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
<div class="col-sm-8">
<table align="center">
<tr>
<td>*Password must start with an alphabetic character</td>
</tr>
<tr>
<td>*Password must be at least 7 character(s) long</td>
</tr>
<tr>
<td>*Password must contain at least 1 special character(s)</td>
</tr>
<tr>
<td>*Password must contain at least 1 uppercase letter(s)</td>
</tr>
<tr>
<td>*Password must not match or contain First Name</td>
</tr>
<tr>
<td>*Password must not match or contain Last Name</td>
</tr>
<tr>
<td>*Password must not match or contain User ID</td>
</tr>
</table>
</div>
</div>
<hr/>
<div class="form-group">
<div class="col-sm-12 text-align-right form-footer">
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
</div>
</form>
<!--login form ends here-->
</div>
</div>
答
检查与此下面的代码，它可以帮助你解决这个问题...
.pd0{
padding : 3px;
margin : 5px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="col-sm-6">
<div class="form-group">
<label for="newPasswd">New Password</label>
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
<div class="col-sm-5 alert alert-warning pd0">
<p>*Password must start with an alphabetic character</p>
<p>*Password must be at least 7 character(s) long</p>
<p>*Password must contain at least 1 special character(s)</p>
<p>*Password must contain at least 1 uppercase letter(s)</p>
<p>*Password must not match or contain First Name</p>
<p>*Password must not match or contain Last Name</p>
<p>*Password must not match or contain User ID</p>
</div>
</form>
</div>
</div>
</div>
</div>
谢谢！这有帮助。 – user2961454