Ярлык, плавающий рядом с вводом при изменении размера окна браузера

Я пытаюсь создать статическую регистрационную форму. К сожалению, метка рядом с входом продолжает плавать влево, когда окно браузера максимизируется. Я хочу, чтобы вся коробка оставалась прежней даже при изменении размера. Это должно выглядеть так.Ярлык, плавающий рядом с вводом при изменении размера окна браузера

Я использую Bootswatch: Yeti вместо нормальной начальной загрузки. Кто-нибудь знает, как это исправить?

МОЙ КОД

HTML

<form class="form-horizontal registerbox"> 
    <fieldset> 
    <legend>Register</legend> 
    <div class="form-group"> 
     <label for="inputName" class="col-lg-2 control-label">Firstname</label> 
     <div class="col-lg-10"> 
     <input type="text" class="form-control" id="inputName" placeholder=""></input> 
     </div> 
     <label for="inputSurname" class="col-lg-2 control-label">Surname</label> 
     <div class="col-lg-10"> 
     <input type="text" class="form-control" id="inputSurname" placeholder=""></input> 
     </div> 
     <label for="inputEmail" class="col-lg-2 control-label">Email</label> 
     <div class="col-lg-10"> 
     <input type="mail" class="form-control" id="inputEmail" placeholder=""></input> 
     </div> 
     <label for="inputPassword" class="col-lg-2 control-label">Password</label> 
     <div class="col-lg-10"> 
     <input type="password" class="form-control" id="inputPassword" placeholder=""></input> 
     </div> 
     <label for="inputPasswordConf" class="col-lg-2 control-label">Confirm Password</label> 
     <div class="col-lg-10"> 
     <input type="password" class="form-control" id="inputPasswordConf" placeholder=""></input> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-10 col-lg-offset-2"> 
     <button type="submit" class="btn btn-primary center" style="width: 100%; background-color: #1fad5c; border-color: #f5f5f5;">Submit</button> 
     </div> 
    </div> 
    </fieldset> 
</form>

CSS

.registerbox { 
    margin: 0 auto; 
    margin-top: 50px; 
    width: 350px; 
    padding: 19px; 
    border: 1px solid #e7e7e7; 
}

Вот мой JSFiddle, так что вы можете экспериментировать с моим кодом себя.

источник

2015-09-04 Aruloci

Вы имеете в виду, на той же линии? – romuleald

Вместо того, чтобы оставаться на одной линии, он должен выглядеть так, как показано на рисунке выше. @romuleald – Aruloci

Я не уверен, что вопрос мне понятен, потому что это то, что он делает на скрипке! – romuleald

Вы должны поместить метку внутри div, содержащей поле ввода. Таким образом, вместо этого:

<label class="col-lg-2 control-label" for="inputName">Firstname</label> 
<div class="col-lg-10"> 
    <input id="inputName" class="form-control" type="text" placeholder=""> 
</div>

ваш HTML должен выглядеть примерно так:

<div class="col-lg-10"> 
    <label class="control-label" for="inputName">Firstname</label> 
    <input id="inputName" class="form-control" type="text" placeholder=""> 
</div>

Вот скрипка https://jsfiddle.net/ob1jn05k/5/.

источник

2015-09-04 11:58:56 cakan

Ярлык, плавающий рядом с вводом при изменении размера окна браузера

ответ

Смежные вопросы