Question

我有一个div，其中我使用输入标签输入输入，我希望在另一个div中显示一些信息，即 @ {{globalSession.OrganizationDomain}}

例如显示它像thsi - ＆gt; [---------------] @ 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

尝试使用Bootstrap插件组

<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

＆＃13;

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

＆＃13;

<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>

＆＃13;

你的想法是什么？

如何在表单中将div与输入标记对齐

2 个答案: