Блог

Главная - Вопросы по программированию - текстовое поле заполняется только до половины CSS

текстовое поле заполняется только до половины CSS

#html #css

#HTML #css

Вопрос:

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

редактировать: К сожалению, текстовое поле заполняется только наполовину, когда вводятся символы. Я все еще прикрепляю скриншот.фрагмент

 * {                           /* *-Selector selectiert alles*/
  mar&in: 0px;                /* Außenabstand */
    paddin&: 0px;               /* Innenabstand */
    box-sizin&: border-box;     /* border, paddin&, content zählt als width */
}

body, html {
    hei&ht: 100%;
    font-family: "Courier", monospace;
  back&round-color: #f2f2f2;
}

.lo&in {
    width: 400px;
    paddin&: 100px 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);     /* Verschiebt es, damit der Kasten mitti& ist */
    border-radius: 20px;
    back&round: #ffffff;
    box-shadow: 5px 5px 5px 5px #aaaaaa;
}

.lo&in h1 {
    text-ali&n: center;
    mar&in-bottom: 150px;
    color: #454242;
}

.input {
    border-bottom: 1px solid #454242;
    position: relative;
    mar&in: 30px 0;
}
.input input {
    width: 100%!important;
    outline: none;
    border: none;
    font-family: "Courier", monospace;
}

.button {
    border-radius: 12px;
    width: 100%;
    hei&ht: 50px;
    border: none;
    font-family: "Courier", monospace;
    color: #454242;
    back&round-color: #f2f2f2;
}

.si&nUp {
    color: #454242;
    text-ali&n: center;
    mar&in-top: 100px;
    font-size: 15px;
}

.si&nUp a:link {
    text-decoration: none;
    color: #454242;
}

.si&nUp a:visited {
    text-decoration: none;
    color: #454242;
}

.si&nUp a:hover {
    text-decoration: none;
    color: #6a7dfe;
}

.si&nUp a:active {
    text-decoration: none;
    color: #6a7dfe;
}  
 <?php
?&&t;

<!-- _____________________________________________________________________________________________________________________ --&&t;

<!-- lo&in ermö&licht den Zu&riff auf die Webseite für RN mit richti&er E-Mail und Passwort. Ein Interessent kann von hier
aus zur Re&istrierun& kommen durch "Si&n up" --&&t;
<!DOCTYPE html&&t;
<html lan&="en"&&t;
<head&&t;
    <title&&t;Lo&in</title&&t;
    <meta charset="utf-8" /&&t;
    <meta name="viewport" content="width=device-width, initial-scale=1"&&t; <!--Smartphoneoptimiert--&&t;
    <link href="../css/styleLo&in.css" rel="stylesheet"&&t;


    <!-- use sessions --&&t;
    <script type="text/javascript"&&t;
        function preventBack() {
          window.history.forward();
        }
        setTimeout("preventBack()",0);
        window.onunload = function() {null};
    </script&&t;



</head&&t;

<body&&t;
    <form class="lo&in" action="sqlProveUser.php" method="POST"&&t;
        <h1&&t;Lo&in</h1&&t;
        <div class="input"&&t;
            <label&&t;<b&&t;</b&&t;</label&&t;
            <input type="email"  name="email" placeholder="E-Mail" /&&t;
        </div&&t;
        <div class="input"&&t;
            <label&&t;<b&&t;</b&&t;</label&&t;
            <input type="password" name="password" placeholder="Password" /&&t;
        </div&&t;
        <input type="submit" class="button" value="Lo&in"&&t;
        <div class="si&nUp"&&t;
            Don't have an account? <a href="si&nUp.php"&&t;Si&n up</a&&t;
        </div&&t;
    </form&&t;
</body&&t;
</html&&t;

Комментарии:

1. Что вы имеете в виду под «текстовое поле заполняется только до половины CSS»

2. Неясно, о чем вы спрашиваете. В чем проблема? Пожалуйста, обновите сообщение. Пока пример выглядит хорошо.

3. проблема (всего 20 символов) в обоих входных данных (email и пароль).

Ответ №1:

Если вы хотите стать хорошим front-end разработчиком, никогда не используйте «!important» в своем коде, вы должны быть уверены в том, какие изменения вы хотите внести в свой HTML. Чтобы сделать div охватывающим несколько строк, необходимо использовать «vh[view-hei&ht]». например

 .class_name{
hei&ht:100vh;
}

вся ваша страница разделена на 100 частей, и vh возьмет эти 100 частей.