Новая строка вставлена ​​перед отображением текстового поля

Question

У меня есть следующий фрагмент кода; но я не знаю, почему символ новой строки (а <br> тега, чтобы быть точными) добавляются между электронной почтой и его соответствующим текстовым полем:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>My Website!</h3> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 

 
<form> 
 
    <div class="form-group" align="center"> 
 
    <div class="input-group" style="width=5px"> 
 

 
     <center> 
 
     <span class="input-group-addon" id="basic-addon1">Email: </span> 
 
     <input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" /> 
 
     </center> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group" align="center"> 
 
    <div class="input-group"> 
 
     <center> 
 
     <label for="Password"></label>Password: 
 
     <input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2"> 
 
     </center> 
 
    </div> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-default">Login!</button> 
 
</form> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

отображаемым Выходом:

Какие изменения должны быть выполнены, чтобы они отображались в одной строке?

Answer 1

Я сделал несколько изменений,

• Снимите <center> тег
• Удалить вручную ширину
• Оберните управления с «рядом», а затем «коллектив- *» DIV так, что ваши средства управления перейти центр (см код)
• Добавить «текст-центр» для родительского DIV из управления

Решает ли ваша проблема?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>My Website!</h3> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 

 
<form> 
 
<div class="row"> 
 
<div class="col-xs-4 col-xs-push-4"> 
 
    <div class="form-group"> 
 
    <div class="input-group">   
 
     <span class="input-group-addon" id="basic-addon1">Email: </span> 
 
     <input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" />  
 
    </div> 
 
    </div> 
 
</div> 
 
    </div> 
 
<div class="row"> 
 
<div class="col-xs-4 col-xs-push-4"> 
 
    <div class="form-group"> 
 
    <div class="input-group">   
 
     <span class="input-group-addon" >Password</span> 
 
     <input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2">   
 
    </div> 
 
    </div> 
 
</div> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Login!</button> 
 
</form> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>