Проблема с позициирования input-а в идентификаторе на HTML и CSS

Question

Предыстория - я начал создавать веб приложение ToDo-list на Python Django, HTML и CSS. Сейчас делаю форму на HTML и CSS и проблема заключается в том, что не получается перетащить вниз приложения строку для ввода задачи. Помогите решить эту проблему, пожалуйста :3 И если можете, дайте советы, если я что-то не так делаю... И до того как это всё в Django запихнуть (если что то не правильно говорю, не ругайтесь пожалуйста)) я решил использовать библиотеку питона - eel (чтобы быстро запускать эту веб прогу из терминала, и чтобы форма была без браузерного toolbar'а). Заранее спасибо!)

Вот код HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToDo List</title>

    <script src="eel.js"></script>
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="task1"><h1>Список дел</h1></div>
    <input id="task" type="text" placeholder="Описание задачи" required="">

    <button id="show">Добавить</button>

    <div class="add_task">
        
    </div>

</body>
</html>

А вот код CSS:

body {
    background: #f46b45;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #eea849, #f46b45);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #eea849, #f46b45); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */;
}

#task {
    display: block;
    height: 100px;
    border: none;
    margin-right: 10px;
    margin-bottom: 100px;
    background: #70e1f5;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ffd194, #70e1f5);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
    padding: 20px;
    color: rgba(255, 255, 255, .5);
    outline: none;
    width: 80%;
    font-size: 26px;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    font-weight: 300;
}

#task:placeholder {
    color: rgba(255, 255, 255, .5);
}

#task1 {
    font-family: "Roboto", sans-serif;
}

#show {
    display: block;
    border: none;
    background: #70e1f5;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ffd194, #70e1f5);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
    padding: 20px;
    color: rgba(255, 255, 255, .5);
    outline: none;
    width: 260px;
    font-size: 26px;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    font-weight: 300;
}

И Python eel:

import eel

eel.init('web')

eel.start('main.html', size=(560, 560))

БЛОГ НА HUSL

Проблема с позициирования input-а в идентификаторе на HTML и CSS

Ответы (0 шт):