水平对齐div和标签

Question

我有一个包含标签的asp.net表单。我想将div标签并排对齐div.But我无法管理我的操作。我已经在下面添加了我的代码片段。你可以帮我吗？ / p>

我的代码段

＆＃13;

＆＃13;

<div class="modal" id="passwordModal" tabindex="-1">
          <div class="modal-dialog">
              <div class="modal-content">
                 <div class="modal-header">
                     <button class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Şifre Değiştirme</h4>
                 </div>
                  <div class="modal-body">
    <div class="form-group">
        <label for="inputPassword">Şifreniz</label>
        <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" />
    </div>
    <div class="form-group">
        <label for="inputNewPassword">Yeni Şifreniz</label>
        <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" />
    </div>
                      <label id="labelAlign">How Can i align this label  near the div above</label>
     <div class="form-group">
        <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label>
        <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" />
    </div>
                  </div>
                  <div class="modal-footer">
                     <asp:Button ID="btn_PasswordChange" class="btn btn-primary"   runat="server" OnClick="btn_PasswordChange_Click"  Text="Değiştir" /> 
                      <asp:Button ID="btn_PasswordClose" class="btn btn-primary"   runat="server" data-dismiss="modal" Text="Kapat" /> 
                  </div>
              </div>
          </div>
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不在给定的div中添加标签类？

<div class="form-group">
<label for="inputNewPassword">Yeni Şifreniz</label>
<input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" />
<label id="labelAlign">How Can i align this label  near the div above</label>
</div>

或者在div中添加内联块：

<div class="form-group" style="display:inline-block">

<强>段：

.trial {
display: inline-block;
}

<div class="modal" id="passwordModal" tabindex="-1">
          <div class="modal-dialog">
              <div class="modal-content">
                 <div class="modal-header">
                     <button class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Şifre Değiştirme</h4>
                 </div>
                  <div class="modal-body">
    <div class="form-group">
        <label for="inputPassword">Şifreniz</label>
        <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" />
    </div>
    <div class="form-group trial">
        <label for="inputNewPassword">Yeni Şifreniz</label>
        <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" />
    </div>
                      <label id="labelAlign">How Can i align this label  near the div above</label>
     <div class="form-group">
        <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label>
        <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" />
    </div>
                  </div>
                  <div class="modal-footer">
                     <asp:Button ID="btn_PasswordChange" class="btn btn-primary"   runat="server" OnClick="btn_PasswordChange_Click"  Text="Değiştir" /> 
                      <asp:Button ID="btn_PasswordClose" class="btn btn-primary"   runat="server" data-dismiss="modal" Text="Kapat" /> 
                  </div>
              </div>
          </div>
      </div>

Answer 2

这对你有帮助吗？

＆＃13;

＆＃13;

label{
  width: 170px;
  position: relative;
  display: inline-flex;
}

input{
  width: 180px;
  position: relative;
  display: inline-flex;
}
.modal-body{
  position: absolute;
}

＆＃13;

<div class="modal" id="passwordModal" tabindex="-1">
  <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
             <button class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title">Şifre Değiştirme</h4>
         </div>
         <div class="modal-body">
            <div class="form-group">
              <label for="inputPassword">Şifreniz</label>
              <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password"                  id="inputPassword" />
            </div>
            <div class="form-group trial">
              <label for="inputNewPassword">Yeni Şifreniz</label>
              <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password"                    id="inputNewPassword" />
            </div>      
            <div class="form-group">
               <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label>
               <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar"                            type="password" id="inputNewPasswordAgain" />
            </div>
        </div>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;