divで入力タグをフォーム内に揃える方法

Question

私は入力タグを使って入力を入力するdivを持っています。別のdivにある情報を表示したいとします。@ {{globalSession.OrganizationDomain }}

例えばthsiのようにそれを表示する - >[---------------] @ domain78.com どのように私はその場所から、この入力された動画のdivを行うことができますか？

<div class="form-group" ng-class="{ 'has-error': submitted && createmanagerform.username.$error.required || createmanagerform.username.$error.pattern }"> 
        <label class="col-md-4 control-label" for="username">Username*</label> 
        <div class="col-md-4"> 
         <input id="username" name="username" type="text" placeholder="Username" minlength="5" maxlength="50" class="form-control input-md" ng-model="theManager.Username" ng-pattern="regex.Username" required autofocus> 
         <div class="col-md-4"> @{{globalSession.OrganizationDomain}}</div> 
         <span ng-show="createmanagerform.username.$error.pattern && createmanagerform.username.$invalid " class="help-block">Username must be small letters and at least 5 characters. Only full stops, hyphens and underscores are allowed.</span> 
        </div> 
       </div> 


<!-- Email input--> 
       <div class="form-group" ng-class="{ 'has-error': submitted && createmanagerform.email.$error.required || createmanagerform.email.$error.pattern }"> 
        <label class="col-md-4 control-label" for="email">Email*</label> 
        <div class="col-md-4"> 
         <input id="email" name="email" type="email" placeholder="john@example.com" class="form-control input-md" ng-model="theManager.Email" ng-pattern="regex.Email" required autofocus > 
         <span ng-show="submitted && createmanagerform.email.$error.required" class="help-block">Email can not be empty</span> 
         <span ng-show="createmanagerform.email.$error.pattern && createmanagerform.email.$invalid " class="help-block">Please enter a valid email address.</span> 
        </div> 
       </div> 

Answer 1

は、ブートストラップアドオングループ

<label class="col-md-4 control-label" for="username">Username*</label> 
<div class="col-md-4"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="User Name" /> 
     <div class="input-group-addon">@domain78.com</div> 
    </div> 
</div> 

Answer 2

.form-control, 
 
input[type="email"] { 
 
\t float: left 
 
}

<div class="form-group" ng-class="{ 'has-error': submitted && createmanagerform.username.$error.required || createmanagerform.username.$error.pattern }"> 
 
        <label class="col-md-4 control-label" for="username">Username*</label> 
 
        <div class="col-md-4"> 
 
         <input id="username" name="username" type="text" placeholder="Username" minlength="5" maxlength="50" class="form-control input-md" ng-model="theManager.Username" ng-pattern="regex.Username" required autofocus> 
 
         <div class="col-md-4"> @{{globalSession.OrganizationDomain}}</div> 
 
         <span ng-show="createmanagerform.username.$error.pattern && createmanagerform.username.$invalid " class="help-block">Username must be small letters and at least 5 characters. Only full stops, hyphens and underscores are allowed.</span> 
 
        </div> 
 
       </div> 
 

 

 
<!-- Email input--> 
 
       <div class="form-group" ng-class="{ 'has-error': submitted && createmanagerform.email.$error.required || createmanagerform.email.$error.pattern }"> 
 
        <label class="col-md-4 control-label" for="email">Email*</label> 
 
        <div class="col-md-4"> 
 
         <input id="email" name="email" type="email" placeholder="john@example.com" class="form-control input-md" ng-model="theManager.Email" ng-pattern="regex.Email" required autofocus > 
 
         <span ng-show="submitted && createmanagerform.email.$error.required" class="help-block">Email can not be empty</span> 
 
         <span ng-show="createmanagerform.email.$error.pattern && createmanagerform.email.$invalid " class="help-block">Please enter a valid email address.</span> 
 
        </div> 
 
       </div>

それはあなたが何を考えですか？