Html формы сложены слишком близко друг к другу - PullRequest
Новая
       3

Html формы сложены слишком близко друг к другу

1 голос
/ 24 апреля 2020

Итак, я создаю страницу поиска сотрудников с HTML и CSS. Это все еще на ранних стадиях, но я сталкиваюсь с одним препятствием, которое заключается в том, что мои формы сложены друг на друге. [! [Они слишком близко друг к другу] [1]] [1] Как их разделить? Я пытался посмотреть на Google и переполнение стека, но все, что я видел, это просто простые формы «имя» и «фамилия». То, что я подумал о создании отдельного идентификатора для всех них, чтобы я мог настроить их соответствующим образом, но, возможно, есть более простой способ. Вот мой HTML

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="Search.css" />
  <meta charset="utf-8" />
  <title>Employee Search</title>
  <body>
    <main>
      <h1>
        Employee Search
      </h1>

      <form>
        <input
          type="text"
          id="fname"
          name="First Name"
          placeholder="First Name"
        />
        <input
          type="text"
          id="lname"
          name="Last Name"
          placeholder="Last Name"
        />
        <input type="text" id="ssn" name="Last 4" placeholder="Partial SSN" />
        <br />
        <input
          type="text"
          id="compID"
          name="CompanyID"
          placeholder="CompanyID"
        />
        <input type="text" id="LoginID" name="LoginId" placeholder="LoginID" />
        <input
          type="text"
          id="Dob"
          name="DOB"
          placeholder="Date of Birth as mm/dd/yy"
        />
        <input type="reset" />
        <input type="submit" value="Search" />
      </form>
    </main>
    <footer>
      <small><i>Copyright &copy; 2020 Employee Search Page</i></small>
    </footer>
  </body>
</html>

А вот мой CSS

* {
  box-sizing: border-box;
}
h1 {
  text-align: center;
}
body {
  background-color: azure;
}
form {
  text-align: center;
  display: block;
}
input {
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
  background-color: ivory;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Итак, еще раз, могу ли я попытаться отделить их? Будет ли работать отдельный идентификатор?

1 Ответ

2 голосов
/ 24 апреля 2020

Добавьте поле для самих входов:

CSS

form input { margin-bottom:10px; }

Измените px на любую сумму, которую вы Если хотите, вы также можете использовать margin-top:10px, если выглядит лучше.

<br/> тоже добавляет больше пробелов, или вы можете использовать новый класс, например:

Пользовательский имя класса 

<input class="more-spacing">

form input.more-spacing{ margin:20px 0 20px 0; }

Значение margin: left top right bottom

встроенные теги стиля также работают:

<input style="margin:20px 0 0 0;">

Кроме того, уже есть так много замечательных ресурсов, которые абсолютно необходимо прочитать, в большинстве случаев есть пошаговые руководства, например:

https://www.w3schools.com/css/css_form.asp

https://www.w3schools.com/css/css_margin.asp

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...