Конкретный текст на этикетке нарушает выравнивание

Question

У меня есть страница входа, которая принимает имя пользователя и пароль.Я сталкиваюсь с очень странной проблемой.Когда я ставлю «Имя пользователя» в качестве текста метки в первой метке, текст появляется над входом, но когда я ставлю «Пароль» в качестве текста для первой метки, он обычно появляется рядом друг с другом.

Код для «Пароль» в виде текста

 <div class="main" style="width: 25%;margin-left: 500px;" align="center">
                     <div style = "background-color:blue; color:#FFFFFF; padding:3px; "><b>Login</b></div>

                <div style = "margin:30px; color: black" class='inv'>

                   <form action = "" method = "post">
                   <br/>
                      <label>Password  :</label><input type = "text" id="username" name = "username" class = "box" value=""  required/><br /><br />
                      <label>Password  :</label><input type = "password" name = "password" id="password" class = "box" value=""  required /><br/><br />
                      <input type = "submit" value = " Submit " class=".btn-primary" /><br />
                   </form>

                   <div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php error_reporting(0);echo $error; ?></div>

                </div>

             </div>
    </div>

Код для «Имя пользователя» в виде текста

<div class="main" style="width: 25%;margin-left: 500px;" align="center">
                     <div style = "background-color:blue; color:#FFFFFF; padding:3px; "><b>Login</b></div>

                <div style = "margin:30px; color: black" class='inv'>

                   <form action = "" method = "post">
                   <br/>
                      <label>username:  :</label><input type = "text" id="username" name = "username" class = "box" value=""  required/><br /><br />
                      <label>Password  :</label><input type = "password" name = "password" id="password" class = "box" value=""  required /><br/><br />
                      <input type = "submit" value = " Submit " class=".btn-primary" /><br />
                   </form>

                   <div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php error_reporting(0);echo $error; ?></div>

                </div>

             </div>

Пожалуйста, помогите !!

Answer 1

Как сказал @Nawed Khan, источник вашей проблемы проистекает из ваших жестко запрограммированных стилей.Эта строка, в частности, заставляет ширину масштабироваться с областью просмотра (размер окна браузера), а поле left-left сдвигает div в сторону на 500px, таким образом, она не будет центрирована в другом браузере или когдаразмер браузера изменен.

<div class="main" style="width: 25%;margin-left: 500px;" align="center">

Короткое исправление заключается в увеличении ширины.

<div class="main" style="width: 500px;margin: 0 auto;" align="center">

Придание ему трудного значения может пока работать.

Но здесь представлены собственные наборы параметров масштабирования для разных экранов, поэтому, если вы серьезно относитесь к тому, чтобы заставить его работать на разных экранах, рассмотрите возможность адаптивного дизайна.

Answer 2

Пожалуйста, уменьшите размер поля ввода, возможно, это поможет.