Кнопка живет своей жизнью html

Question

Кнопка живет своей жизнью html

Рейтинг: 0Ответов: 2Опубликовано: 26.03.2023

Как сделать чтобы кнопка находилась под последним вводом?

main #osn #feedback {
    height: 600px;
    padding-top: 20px;
    clear:both;
}

main #osn #feedback input {
    width: 40%;
    margin-left: 30%;
    float: left;
    border-radius: 5px;
    border: 2px solid darksalmon;
    padding: 5px;
    color:black;
    margin-bottom: 10px;
    font-size: 1.2em;
}

main #osn #feedback input:focus, main #osn #feedback textarea:focus {
    border: 2px solid #f78080;
}

main #osn #feedback input#done:hover {
    border: 2px solid #f8d881;
    cursor: pointer;
}

main #osn #feedback textarea {
    width: 50%;
    height: 150px;
    margin-left: 25%;
    float: left;
    border-radius: 5px;
    border: 2px solid darksalmon;
    padding: 5px;
    color:black;
    margin-bottom: 10px;
    font-size: 1.2em;
    resize: none
}

<main>
        <div id="osn">
            <form id='feedback' action="include/feedbackk.php" method="post">
                <input type="text" placeholder="Имя" name="name">
                <input type="text" placeholder="Email" name="email">
                <input type="text" placeholder="Тема сообщения" name="subject">
                <textarea name="message" placeholder="Введите ваше сообщение"></textarea>
                <button type="submit">Отправить</button>
                
                <div id="probel"></div>


<!-- begin snippet: js hide: false console: true babel: false -->

css html вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 2

Таким образом это верстается. полям формы мы всегда задаём "width:100%;", если нужно что-то сдвинуть, задать определённую ширину форме, задаёте это всё внешним элементам.
Старайтесь не использовать без необходимости для вёрстки идентификаторы(id), только классы. А ещё нет смысла выстраивать цепочку из "id" как вы сделали(#obs #feedback) - id всегда уникальны и поэтому нет смысла выстраивать цепочку, достаточно просто "#feedback". Также классы удобней использовать, так как у вас может быть на сайте более двух веб-форм с одинаковыми стилями, а выставляя "id" вы применяете стили только к одной форме, когда можете для веб-форм придумать общий класс типа - "webForm" и ему давать стили, которые будут для всех форм одинаковыми.
Это не обязательно, но вам так проще будет верстать. С практикой всё придёт.

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
#feedback {
    padding-top: 20px;
    padding-bottom: 20px;
    clear:both;
    width: 300px;
    display: block;
    margin: 0 auto;
}

#feedback input {
    width: 100%;
    border-radius: 5px;
    border: 2px solid darksalmon;
    padding: 5px;
    color: black;
    margin-bottom: 10px;
    font-size: 1.2em;
}

#feedback input:focus, #feedback textarea:focus {
    border: 2px solid #f78080;
}

#feedback input#done:hover {
    border: 2px solid #f8d881;
    cursor: pointer;
}

#feedback textarea {
    width: 100%;
    height: 150px;
    border-radius: 5px;
    border: 2px solid darksalmon;
    padding: 5px;
    color:black;
    margin-bottom: 10px;
    font-size: 1.2em;
    resize: none
}
button {
  font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    display: block;
    width: max-content;
    padding: 10px 20px;
    background: darksalmon;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}
button:hover {
  background-color: black;
  color: white;
}

<form id='feedback' action="include/feedbackk.php" method="post">
  <input type="text" placeholder="Имя" name="name">
  <input type="text" placeholder="Email" name="email">
  <input type="text" placeholder="Тема сообщения" name="subject">
  <textarea name="message" placeholder="Введите ваше сообщение"></textarea>
  <button type="submit">Отправить</button>
</form>

Answer 2

▲ -3

<form id='feedback' action="include/feedbackk.php" method="post">
    <p><input type="text" placeholder="Имя" name="name"></p>
    <p><input type="text" placeholder="Email" name="email"></p>
    <p><input type="text" placeholder="Тема сообщения" name="subject"></p>
    <p><textarea name="message" placeholder="Введите ваше сообщение"></textarea></p>
    <p><button type="submit">Отправить</button></p>
</form>

Кнопка живет своей жизнью html

Ответы